[Resolved] Mobile Nav menu spacing

[chris]

Hey support team,

I am working on a redesign nav where the logo is in the center and the menu is on both sides of the logo. I found your article on that and was able to get that working. Perfect!

Only problem now is that when I view mobile menu, there are is a space in between the menu items (Same place where the logo would be on the desktop version) Any idea how to adjust the space on the mobile side?

Thank you.
Chris

[Leo]

Hi there,

Can you modify this block of existing CSS:

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

to this:

.slideout-navigation li.menu-item-separator,
.main-navigation.toggled li.menu-item-separator{
	display: none !important;
}

Let me know if this helps 🙂

[chris]

You rock! Thank you! That did it. 🙂

Any CSS code to move the mobile menu more closer to the left?

[Leo]

Are you referring to the mobile toggle or the actual menu items or both?

Let me know 🙂

[chris]

Hi Leo,

What I am want to fix is the menu positioning on the mobile version of the site. I want to move the mobile menu closer to the left of the page.

screenshot

Thanks.

[Leo]

Try this:

button.menu-toggle {
    padding-left: 10px;
}

Let me know 🙂

[chris]

You’re the man Leo! Thank you so much. I am good to go. 🙂

[Leo]

No problem 🙂

[Author]

Posts