Main top menu does not line up on smaller devices

Hi,
I am having trouble having the top menu to line up on smaller devices (Fire HD) or a somewhat minimized browser.
Is there a way to keep it always centered?

This also applies to the hamburger menu on mobile - it is not centered but anchored to the top.

Can I center it all?

See screenshot for my issue

My site: https://zanis-test.000webhostapp.com/

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*center menu */
ul#menu-top-menu, {
    text-align: center;
    margin: 0 auto;
     width:100%
}
.nav.navbar-nav, div#navbar  {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

Best Regards,
Support

Tried the code you posted with no success :frowning: Menu still jumps over

It actually made the menu that was previously working jump over to the next line

Hey there,

Thank you for clarification,

Revising the code we came up with this.

/*reduce */
@media (min-width: 768px){
.container {
    width: 756px;
}
}

Best Regards,
Support.

No go for me again.
On desktop, the logo image now moved to the middle and everything is centered.

The way it is in the original theme (logo left aligned while the menu is right aligned) should carry over, while on smaller devices it should downgrade gracefully

I would love to keep it the way it is with the default theme, but not jump over and out of alignment on smaller devices, like ipad or fire HD

thank you

Following up. Any advice?

Hey there,

I think I found a viable work around.

Try the following code.


/*reduce padding*/
#menu-item-59 > a {
    padding-left: 0px;
}
/*reset padding */
@media (min-width: 768px){
#menu-item-59 > a {
    padding-left: 18px;
}
}

Best Regard.
Support