Docs

[Moonworks]

When my site is viewed in a browser window that is narrower than normal, the menu moves onto a second row, which is expected, but when this happens, the menu covers the content below it.

http://www.authorpa.com

[Joao]

Hi There,

Please add the following code to Appereance | Customizer | Custom | CSS

@meida(max-width: 1350px) {
.x-navbar .desktop .x-nav > li > a {
    font-size: 11px; 
}}

Hope that helps

Joao

[Moonworks]

Thanks for the code. Unfortunately, the navbar is still covering the content when it goes to the second row.

I’ve attached a screenshot to show what I mean.

Thanks.

[Friech]

Hi There,

As we already know, the issue is because of the menu items drops on second line on a narrowed screen. What we could do with this is either adjust the font-size and spacing of the menu items or show the mobile menu sooner.

/*show mobile menu sooner*/
@media (min-width:  980px) and (max-width: 1348px) { 
	.masthead-stacked .x-btn-navbar {
	display: block;
    	float: right;
	}
	.x-nav-wrap.mobile.collapse.in {display: block;}
	.x-nav-wrap.desktop {display: none;}
}

Or

/*adjust font menu size and spacing*/
@media (min-width:  980px) and (max-width: 1348px) { 
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
	    padding-left: 10px;
	    padding-right: 10px;
	    font-size: 1em;
	}
}

Let us know how it goes.

Cheers!

[Author]

Posts