Navbar and Menu not centering vertically

Support
#1

My navbar contains my logo and a main Ubermenu and until recently they both were centered vertically. After an update last year (I believe the timing is right), the vertical alignment changed.

Now the logo sits lower than the menu, not straight in line. If I increase the padding on the logo, the logo will change position, but the menu items (text) are crunched up against the top of the nav bar (page).

I’ve tried changing several settings one at a time in Ubermenu and X to no avail…try it, no change, change it back, try the next, repeat.

I finally added this CSS into Ubermenu custom CSS

body .x-navbar .x-navbar-inner {
padding-top:15px;
}

It made the menu appear more centered vertically moving the text away from the top by adding some space at the top, but it also took the logo lower and is incorrect.

I’ve tried the navbar top height option, but it only increases the height and keeps everything in the same proportion against the top of the menu.

I’ve searched the forums (which is where I got the CSS code), but I’m at my wits end on this one. It’s like you can’t inline the jpg of the logo with the menu any more, like it used to.

I wish I could point to something that changed it, but like I said, after an update, it was just like that when I logged on one day. With the shutdown, this is the first chance I’ve had to spend time on it to fix it and it’s soooo frustrating.

Any help is appreciated.

#2

Hi @baywestchurch1,

Unfortunately, with checking CSS code in the forum you will not get what you want as each website logo and menu might be different. Usually, the menu and logo are inline with no problem, but for your website, it is a matter of UberMenu and the logo.

I came up with the CSS code below that you can add into X > Theme Options > CSS:

body .masthead-inline .desktop .x-nav {
    padding-top: 4px;
    padding-bottom: 2px
}

body .x-navbar .x-navbar-inner {
    padding-top: 10px;
}

body .x-btn-navbar.collapsed {
    margin-top: 0;
    margin-bottom: 13px;
}

But I suggest that you learn more about CSS and how to select proper tags to add the style that you want. The problem was not the whole navigation wrapper padding, it was the wrapper of the menu itself and it needed a few padding. Also, I checked the mobile mode and I found out that the mobile menu was not inline either. There was a top margin at the top section of the mobile menu toggle. I removed that and added a proper bottom margin to make sure everything is inline.

I used the Chrome browser developer toolbar to find the proper selector and have a visual representation of each tag. I suggest that you take time and learn the tool here:

I used simple padding and margin for the CSS code itself, but I suggest that you have the website below at hand and search your way around to learn more CSS stuff:

https://www.w3schools.com/css/

Finally, if you prefer to have a video tutorial, the CSS starting guide below might be of your interest:

Thank you.

#3

Thanks so much! I appreciate it.

#4

You’re welcome :slight_smile:

#5

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