[Resolved] Trouble Centering Hamburger Menu on Mobile

[Bill]

I am opening a new thread per your suggestions from https://generatepress.com/forums/topic/centre-align-hamburger-icon-on-mobile/#post-762512

I am having trouble centering the hamburger menu on mobile.

Here is the transcript from the other post questions that I asked:

I tried the CSS provided above. However, I can not center my hamburger menu. Are there some other tricks to do this?

TO clarify when I add mobile header > ON it pushes the hamburger menu to the left.

When I turn off the mobile header but add my Navigation logo (which is my website logo and that must be there) the logo then shows up in mobile however now it pushes the Hamburger menu to the right.

What can I do to have my Navigation Logo (which is the website logo) centered on mobile and have the hamburger menu centered either below the logo or above. Thanks

[David]

Hi there,

try adding this CSS instead:

@media (max-width: 767px) {
    .inside-navigation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .site-logo {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 100%;
                flex: 1 0 100%;
    }
    .site-logo img {
        margin-left: auto;
        margin-right: auto;
    }
}

[Bill]

Wow, that did it thanks. A question there is massive space between the hamburger menu and the header logo, and there is massive space between each menu item. What is the CSS to adjust this as well? Should I start a new thread for this? Thanks again. Great service.

[David]

I am not seeing that code on the live site? Do you have any cache plugins that need clearing?

[Bill]

David,

I just found this code that worked:
/*CENTER MOBILE HEADER */

@media (max-width: 767px) {
.inside-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-logo {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.site-logo img {
margin-left: auto;
margin-right: auto;
}
}

However, now the menu is compressed next to one of the menu items in mobile. See: http://prntscr.com/lxywp7

[Bill]

I mean the menu is compressed next to ‘Hire Me’ once I press the hamburger menu. Thanks.

[David]

Try this CSS:

button.menu-toggle {
    flex: 1 0 100%;
}

[Bill]

Thank you. That fixed everything. Happy holidays to you.

[David]

You’re welcome and to you too!

[Author]

Posts