How can I vertically align the top menu in its container?

  • The top menu of this theme is per default vertically aligned to the middle in its container. This looks fine with a small logo. However, if your logo has a higher dimension, it will lift the top menu and a larger white space is given to the main site. How can I vertically align the top menu to the bottom of its container? I know, that there are meny hacks on the internet. They often consists of CSS code, that fixes specific margins and padding. However, I am not looking for those, because of the dynamics on different devices. I am just looking for a clean alignment option, such as top, middle and bottom. Thanks for writing this great looking and great working theme.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @micskidk –

    Thanks for getting in touch. Do you mind sharing a link to your site so I can see what you’ve got set up already? It sounds like you are using a larger logo than what the theme suggests. Happy to take a look at possibilities.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi @micskidk, I did a bit of playing around with Shoreditch on my test site, and the vertical alignment of the menu is done with CSS, so we have to fix that with CSS. The header area is set to display: flex; so we have to use CSS to align the menu to the bottom of its parent div. Add the following to your custom CSS and see what you think. In my testing, it worked all all device screen sizes without issue, but please test in phones and small tablets, if you can, to confirm.

    @media screen and (min-width: 320px) {
.site-header-wrapper {
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}
}
    Thread Starter Michael H.

    (@micskidk)

    I added the flex-end CSS code as additional CSS in WordPress and tested it on my test site in Chromium on Ubuntu desktop, Chrome on small Android horisontal and vertical tablet and Chrome on Android vertical and horisontal smartphone. The top menu now aligns vertically to the bottom on all devices and aligns perfectly with the logo every time. This alignment was absolutely, what I was looking for. Thanks a lot for looking into this issue, @sacredpath. It would be very nice, if this vertical alignment could become an option within the Shoreditch theme.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    You are welcome. I doubt this will be added as an option to the theme. If there are more requests for such an option, it may show up at some point, but it really is a customization issue. Luckily with CSS3, we have a lot more control over things than we used to.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How can I vertically align the top menu in its container?’ is closed to new replies.

Tags