basis – vertical position of the menu in the header

  • Author
    Posts
  • #1602223

    vpellpro
    Member

    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.

    #1602309

    hfzrhmn
    Member

    What theme are you using on the blog?

    #1602322

    vpellpro
    Member

    It’s Basis.

    #1602380

    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!

    #1602502

    vpellpro
    Member

    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.

    #1602505

    justpi
    Member

    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).

    #1602510

    vpellpro
    Member

    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)!

    #1602515

    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. :)

    #1602516

    justpi
    Member

    “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.)

    #1602518

    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!

    #1602523

    justpi
    Member

    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.

    #1602543

    vpellpro
    Member

    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

    #1602545

    justpi
    Member

    @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.

    #1602547

    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.

    #1602552

    justpi
    Member

    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.

    #1602553

    I see. :)

    #1602554

    justpi
    Member

    ~~

The topic ‘basis – vertical position of the menu in the header’ is closed to new replies.