Need help? Check out our Support site, then


basis - vertical position of the menu in the header

  1. Hello,

    The menu is vertically centered in the header if i provide only the title.
    But, as soon as i add the tagline, the menu isn't vertically centered anymore.
    It's also the case (and it is more obvious) when i replace the title with a logo.

    Is there a way via custom CSS to always keep the menu vertically centered in the header?

    Thanks for your help,
    Vincent

    The blog I need help with is sandbox1vpell.wordpress.com.

  2. What theme are you using on the blog?

  3. It's Basis.

  4. The easiest way to accomplish this is to adjust the line-height of your navigation to be the same as the height of your logo:

    #basis-header-nav li { line-height: 63px; }

    In this case, 63px is the height of your logo. If you were to display your tagline again, you'd have to adjust the line-height to accommodate the extra height.

    I hope this helps. Thanks!

  5. Thanks for the tip, it worked though i must avoid now having the menu on 2 lines because of the huge line height, but it's manageable.

  6. Not really, because the theme is responsive, so on some screens and devices the menu will probably break into 2 lines anyway.

    Staff can see private blogs but we volunteers cannot. So, if you want a better solution you should either wait for a new staff reply or temporarily switch to the middle privacy option (the demo of the theme doesn't have a tagline so I can't use it).

  7. Thanks for the reply and the info concerning the privacy options.
    I'll leave the site private for now as i make a lot of change to the CSS right now.
    But i'll switch for the next question(s)!

  8. The problem of vertically centering is a limitation of CSS. There are a ton of hacks on the web to try to fix it :) and the one shaunandrews posted is probably the best.

    In the future, we'll probably be able to use something new called flexbox layout, but it's very new and only works in the very latest browsers right now. It's really neat though, so I made up an example to try it:

    First, use this to visualize where the elements are both before and after adding the next set of CSS:

    #basis-header-nav > ul {
    	border: 1px solid red;
    }
    #basis-header-nav > ul li {
    	border: 1px solid blue;
    }

    Then add this:

    @media screen and (min-width: 800px) {
    #basis-header-nav > ul {
    	height: 86px;
    	display: flex;
    	flex-wrap: wrap;
    	align-items: center;
    	justify-content: flex-end;
    }
    #basis-header-nav ul li {
    	line-height: 1em;
    }
    }

    Make sure the tagline is visible when you try this.

    Side note: it worked for me on the front end using the Basis theme, but not in the live preview at Appearance > Customize > CSS.

    This example might not be useable right now, but I think it's neat to look at new stuff coming up for CSS sometimes. :)

  9. "The problem of vertically centering is a limitation of CSS"...
    ...when an element floats left or right, as in this case. (Right?)

    I would suggest something like this:

    #basis-header-nav, #title {
    display: table !important;
    height: 111px;
    }
    #basis-header-nav ul, #title h1 {
    display: table-cell;
    float: none;
    vertical-align: middle;
    }

    (I'd need to add the selector for the tagline, and I might need a different set for narrow devices - I can't tell when I can't see vpellpro's blog, for instance when I don't know how long the blog title is.)

  10. Nice! You just have to take out #title from the first selector because the tagline site just below the title and it would get pushed down too much and look funny. Also, #title h1 isn't needed in the 2nd selector. Last, a shorter line-height for the li tag would be icing on the cake:

    #basis-header-nav li {
    	line-height: 2em;
    }

    I actually tried messing around with this same hack and missed the !important on display:table which gets it to work in this context. Srsly, niiiice.

    The line-height solution is simpler/better, but only if the menu is on one line. :)

    Cool!

  11. Thanks Sheri.
    My idea was to sidestep the problem of centering #basis-header-nav and #title by centering what's inside them (inside both of them). So far I don't see why I should take out #title and #title h1, but it all depends on the nesting, which I can't see. I assumed that the html would be like this:

    <div id="title">
    <h1>TITLE</h1>
    <h2>TAGLINE</h2>
    </div>

    If it's so, then my second selector becomes:
    #basis-header-nav ul, #title h1, #title h2
    But if the tagline isn't inside #title, then my idea was wrong.
    So I guess that your "tagline sits just below the title" means it's not nested the way I thought.

  12. Hi (from France),

    i don't have time to test your different solutions for now and i can't participate to your expert discussion as i'm somewhat of a CSS newbie (some theoretical knowledge but very little practice), but i already see here a lot to test and learn in a single discussion!

    I'm eager to go further in my CSS discovery and it seems that WordPress.com + the "Custom Design" update + those forums is the right combination to do it ;-)

    Thanks to all of you,
    Vincent

  13. @Vincent: You're welcome, and I'm glad you liked it here!
    Same thing happened to me several years ago, and I never left: I learned a lot thanks to these forums, and I keep learning.
    You don't need to try my solution: half of if has the same effect as shaunandrews's simpler solution and the other half is wrong.

    @Sheri: Vincent turned the blog to public so now I have my answers!
    Got a new suggestion too, on how I would exactly center the logo image in this case: since .custom-logo has a 0.625rem bottom padding, then I'd change the background position from 0 0 to 0 0.3125rem.

  14. Vincent, this is a good thread! :)

    justpi, I'm not convinced, because if you make #title 111px high, there's too much space between it and the tagline. It would be simpler to let that be the height it wants to be (it's the tallest element already) and match the nav height to the title + tagline combined height. Aside from the #title height/padding argument though, I think both solutions are interesting and good.

  15. No no - my new suggestion has nothing to do with the previous one: it refers to Vincent's case (bg image to .custom-logo, tagline removed). If you wanted that bg image to be exactly centered, you'd nudge it 0.3125rem down.
    The 111 in my previous example was arbitrary, as I couldn't see the blog, and the whole idea was based on the assumption that the tagline is nested inside #title, which it isn't. So that idea was wrong, as I already said to Vincent.

  16. I see. :)

  17. ~~

Topic Closed

This topic has been closed to new replies.

About this Topic