How to center everything in the header menu

Support
#1

Hi there,

How can I center my menu in the header? And also center the sandwich menu button that appears in smaller browser windows and mobile? Once the sandwich menu appears I want to remove the rest of the menu (so you only see it unfold when you click on the menu button) - how can I do this?

Currently for some reason my menu is sitting off centered on the left and my sandwich menu appears on the right in addition to the normal menu…

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

body .x-navbar .x-nav-wrap.desktop .x-nav {
    max-width: 805px;
    float: none;
    margin: 0 auto;
}
#3

Thank you! This helps to center the header, but doesn’t solve the problem with smaller browser windows and the mobile version. I want the menu to disappear into a sandwich menu button when it starts breaking into two lines. How can I do that?

Thank you!

#4

Hello,

Your menu is here and to align it to center, add the following CSS under the code below to X > Launch > Options > CSS

 .x-btn-navbar {
    margin-right:  42%;
 }
#5

Thank you! This works to center the menu button.

I want the words in the menu to disappear into the sandwich menu button from the window size on when it starts breaking into two lines. How can I do that? (At the moment the menu button appears in addition to the words, I want it to replace the words)

#6

Hi there,

Please update this code:

body .x-nav-wrap.desktop {
    float: left;
    display: block;
    width: 100%;
    max-width: 1280px;
}

to

@media (min-width: 768px) {
    body .x-nav-wrap.desktop {
        float: left;
        display: block;
        width: 100%;
        max-width: 1280px;
    }
}

Hope this helps.

#7

Thank you! It works for me with a min-width of 1000 px.

However, the menu button now is not centered anymore, how can I change this? Also the button is sticking to the buttom of the header now which doesn’t look nice, how can I move it up a little bit? (see screenshot attached)

Thanks!

#8

Hey There,

Thanks for updating in! To make the mobile menu icon positioned at the center, please have your custom css updated and make use of this code:

body .x-btn-navbar {
    margin-right: calc(50% - 21px);
}

Hope this helps. Please let us know how it goes.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.