Docs

[tucker_m]

Hey there,

I’m looking to get my collapsed menu button that shows on mobile to align centered. As you can see in the attached image, the menu is aligned to the right rather than in the center. The menu items in a regular web browser view are aligned left, which is perfectly fine. I’m simply looking for the mobile menu button to be centered.

Also, when I view the site on a iPad view, the button pops up to the right of the logo image (see attached image). How would I go about fixing this as well?

Thanks for the help!

[tucker_m]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customizer:

@media (max-width: 767px ) {
    .masthead-inline .x-btn-navbar {
        float: none;
        clear: both;
        margin-bottom: 15px;
        display: inline-block;
    }

    .x-navbar-fixed-left .x-brand {
        clear: both;
        width: 100%;
    }
}

Hope this helps.

[tucker_m]

The mobile collapsed menu is now aligned to the left instead of center. What do I need to change in the code to center it rather than aligned left (see attached photo)?

Also, the iPad view never changed. The menu is still located up at the right hand corner of the screen in vertical view (see attached photo).

Thanks!

[Joao]

Hi There,

Please update this code :

@media (max-width: 767px ) {
.masthead-inline .x-btn-navbar {
float: none;
clear: both;
margin-bottom: 15px;
display: inline-block;
}

to

@media (max-width: 767px ) {
    .masthead-inline .x-btn-navbar {
        float: none;
        clear: both;
        margin-bottom: 15px;
        display: inline-block;
       margin-left: 45%;
    } }

Hope it helps

Joao

[tucker_m]

This reply has been marked as private.

[Lely]

Hi There,

Please update this:

@media (max-width: 767px ) {
    .masthead-inline .x-btn-navbar {
        float: none;
        clear: both;
        margin-bottom: 15px;
        display: inline-block;
       margin-left: 45%;
    } }

To this:

@media (max-width: 979px ) {
    .masthead-inline .x-btn-navbar {
        float: none;
        clear: both;
        margin-bottom: 15px;
        display: inline-block;
       margin-left: 45%;
    } }

Hope this helps.

[Author]

Posts