Vertically Align Nav Bar Logo

Support
#1

Hello,

I have centered a logo in the nav bar, but now I need to vertically align in it (in the middle) with the other menu items.

How can I do this?

I would also like to get rid of the underline on the logo upon hover and selection, and have assigned it a class of .nav-logo. What CSS would I use to get rid of the underline on hover and when selected?

Link to site

Thank you!

#2

Hi,

To align it, you can add this in X > Launch > Options > CSS

.x-navbar .desktop .x-nav>li.menu-item-31 a {
    padding-top:0;
}

.x-navbar-inner {
    min-height: 100px;
}

.x-navbar .desktop .x-nav > li > a {
    height: 100px;
}

Hope that helps

#3

Thank you! That helped for the first part of my question! Second part:

I would also like to get rid of the underline on the logo upon hover and selection, and have assigned it a class of .nav-logo. What CSS would I use to get rid of the underline on hover and when selected?

I’m having trouble figuring this one out if you don’t mind letting me know what CSS I should use. Thanks

#4

Hi There,

We can always use browser developer tools to check structure. See this: https://screencast-o-matic.com/watch/cbQVXZIem4

.x-navbar .desktop .x-nav > li#menu-item-31 a:hover span,
.x-navbar .desktop .x-nav > li#menu-item-31 a span {
    box-shadow: none;
}