Logo Overlapping with Nav Bar Menu in Tablet View

[newmoonstrategy]

Hi,

The logo on our client’s site is overlapping with the navigation menu in tablet view. We designed the header so that half of the logo hangs off the header in desktop view. On mobile view, there is enough room for the logo and the menu. On tablet, however, this causes issues. Please see attached screenshot.

Thank you!

[jade]

Hello Kate,

Changing the height of the navbar area might fix the issue so please try this code in X > Theme Options > CSS:

@media (max-width: 979px) {
    .masthead .x-navbar-wrap {
        height: auto !important;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[newmoonstrategy]

Hi Jade,
I pasted the code provided in the X Theme CSS and it did not make any adjustments to the menu height. I believe this will fix it as well, but that code did not seem to work. What else can I provide you with to allow you to adjust the CSS?

Thank you!

[friech]

Hi Kate,

Please update the given code to this:

@media (max-width: 979px) {
	.masthead .x-navbar-inner,
    .masthead .x-navbar-wrap {
        min-height: 180px !important;
    }
    .masthead .x-nav-wrap.mobile {
    	margin-top: 160px;
    }
}

Please note that this issue is happening because what you did to your logo (hangs off the header) without taking the mobile dropdown menu into account. Further customization from here would be outside of the support that we can offer.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

[newmoonstrategy]

This fixed it, thank you! You can close this ticket.

[jade]

You’re most welcome, Kate.