Docs

[Rue Nel]

Hello There,

Thanks for providing the information. Do you want something like this?

If that is the case, please adjust the “Navbar Top Link Alignment” in the customizer, Appearance > Customize > Header > Links – Alignment. Put at least 55 pixels to have that space above and bottom of the menu.

And instead of having boxes, you can have just lines like this:

In order to do that, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .mobile .x-nav li>a {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    margin-bottom: 0;
}

We would loved to know if this has work for you. Thank you.

[Nvizion]

can you help me fix now that ipad turned in land scape mode the menu goes down below logo?

[Nvizion]

and what about gap below mobile menu and start of the page? how to decrease?

[Nvizion]

that code didnt work unfortunately…

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1072px) {
body .x-nav-wrap.desktop {
    display:none;
}

body .x-nav-wrap.mobile {
   display:block; 
}

body .x-nav-wrap.mobile.collapse {
   display:none;
}

body .x-nav-wrap.mobile.collapse.in {
   display:block !important;
}

body .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

body .x-navbar {
    padding-bottom: 0;
}
}

Hope that helps.

[Nvizion]

didn’t change anything :/

[Rue Nel]

Hello There,

The code is not working because there is an invalid code in your custom css. Please check this out: http://prntscr.com/dulcmr

To save you some time, I have fixed the issue and corrected the necessary code. Your mobile menu is now have lines and not with boxes. And the logo and main menu is no longer broken in tablet screens.

If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[Nvizion]

Thank you rue nel. Is there anyway to reduce the padding below the mobile menu when it drops down?

[Friech]

Hi There,

Look for this block of code on your Custom CSS:

.x-navbar {
padding-bottom: 26px;
}

And update that to this:

/*Apply bottom padding on navbar in desktop view only*/
@media (min-width:  980px) {
	.x-navbar {
    	padding-bottom: 26px;
	}
}

Thanks.

[Nvizion]

I still want padding below the top nav bar but I was wondering if at the bottom once you click the button and the links drop down and see the last nav link if there was a way to reduce just that space…

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

.x-navbar .mobile .x-nav {
   margin-bottom:0;
}

You may change 0 to adjust spacing.

Hope that helps.

[Author]

Posts