Menu layout on smaller screen sizes

[Pablo]

Hi, the menu layout of my website looks like this:

1. on iPhone in landscape + iPad mini in portrait: http://prntscr.com/h2pn0j
2. on iPad Pro in portrait + iPad mini in landscape: http://prntscr.com/h2poqh

For case number 1, can you provide me css code so the logo is centralized and the hamburger menu is centralized under the logo?

For case number 2, can you provide me css code so the logo is centralized and the menu is centralized under the logo?

Url: www.thoekskekeerbergen.be

Regards,
Pablo

[ruenel]

Hey Pablo,

Thanks for writing in!

1.) You can make use of this code:

@media(max-width: 980px) {
    .x-navbar {
        text-align: center;
    }

    .x-brand {
        float: none;
        margin: 0 auto;
    }

    .masthead-inline .x-btn-navbar {
        margin-bottom: 20px;
    }
}

Screenshot

2.) You can make use of this code:

@media(min-width: 980px) and (max-width: 1150px){
    .x-navbar {
        text-align: center;
    }
    
    .x-brand {
        float: none;
        margin: 0 auto;
    }

    .masthead-inline .desktop .x-nav,
    .x-nav-wrap.desktop {
        float: none;
        width: auto;
        max-width: 665px;
        margin-left: auto;
        margin-right: auto;
    }
}

Screenshot

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

[Pablo]

@RueNel

@media(min-width: 980px) and (max-width: 1150px){
.x-navbar {
text-align: center;
}

.x-brand {
    float: none;
    margin: 0 auto;
}

.masthead-inline .desktop .x-nav,
.x-nav-wrap.desktop {
    float: none;
    width: auto;
    max-width: 665px;
    margin-left: auto;
    margin-right: auto;
}

}

Ok guys, seems to be working. Thanks.

[Joao]

You are welcome!