Vertically Align Desktop Menu

Support
#1

Hi,

I would like to be able to vertically align my desktop navigation bar so it is in the middle of the navbar.

I have tried this, but it didn’t work: https://theme.co/apex/forum/t/issue-with-menu-item-alignment/57796/2.

Hope you can help :slight_smile:

Thank you.

#2

Hey Tom,

There is a coming soon page active on your site and I am not able to see the current state of your site.

But based on your screenshot, please go to X > Theme Options > Header > Links Alignment then change the value of the Navbar Top Link Alignment (px).

Hope this helps.

#3

Sorry about that, I completely forgot about that!

I have set NAVBAR TOP LINK ALIGNMENT (PX) to be 42px.

Is there no CSS that would work to just say do vertical-align:middle so the menu is always in the middle of the menu, regardless of the size of the logo or the nav bar?

Thanks.

#4

Hey Tom,

Header has a complex structure, there is no easy way to do this with CSS. It largely depends upon the Navbar height (Theme Options > Header > Navbar Top Height) and the logo height. If both are same then it can be achieved with flexbox. To simulate that you can try adding the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a {
    display: flex;
    align-items: center;
}
.x-navbar-static-active .x-navbar .desktop .x-nav>li>a>span, .x-navbar-fixed-top-active .x-navbar .desktop .x-nav>li>a>span {
    margin-top: 0 !important;
}
.x-brand img {
    max-height: 80px;
}

Now with the above CSS, set the navbar top link alignment to 0. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

Thanks Nabeel. It seems that the original NAVBAR TOP LINK ALIGNMENT (PX) to be 42px has resolved this.

Many thanks.

Anyone else that might be interested, I also did the vertical alignment on the mobile hamburger by adding this CSS to the global CSS section and adjusting the margin-top number until it was correct for my logo.

Adjust max-width as needed - test in Chrome Dev Inspector.

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
margin-top: 30px !important;
}

Thanks.

#6

Hi Tom,

Glad you sorted things out, but there is also an option for mobile menu vertical alignment in Theme Options > Header, see Mobile Navbar Button Alignment option.

Hope it helps,
Cheers!

#7

Thank you for that, I just went straight in with the CSS I found on here.

Thanks!

#8

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.