[Resolved] hamburger menu beside site title instead of below

[Gord]

How to align the hamburger menu so it appears beside the site title instead of below it at mobile sizes? example: similar to Studiopress genesis sample site.

GP Premium 1.7.2

[David]

Hi there,

do you have a link to the site so we can provide a fix?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gord]

http://deepdesign.flywheelsites.com/

https://demo.studiopress.com/genesis-sample/

[David]

Try this CSS:

@media (max-width: 768px) {
    .inside-header {
        padding-left: 30px;
        padding-right: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .inside-header .main-navigation {
        margin-left: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gord]

I added the CSS but the hamburger still appears below the site title.

[David]

Sorry i made a typo in the code above can you retry that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reed]

Hi I tried this on my site (https://reedsutton.ca/) and it is not working.
Is there an easy fix?

[David]

Hi there,

try:

@media (max-width: 768px) {
    .inside-header {
        padding-left: 20px;
        padding-right: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .inside-header .main-navigation {
        margin-left: auto;
    }
    .site-branding {
        flex: 0 0 75%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reed]

Thanks!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts