Logo on left, mobile menu on right with phone button next to it…

[Nadine]

Hi,
I’m trying to do the following on mobile – logo on left, phone button next to hamburger menu on right, with translator drop down below that on right.I mocked it up, hopefully the image below works!

Edit: trying a different place

Thanks!

[David]

Hi there,

can you unlock that image so we can view – it currently requires access to be granted 🙂

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

[Nadine]

Hi David, thanks. I tried unlocking but it still wasn’t showing so I loaded onto the site instead. I edited my original comment.

[David]

In your child theme you have some CSS for your mobile media query.
Replace it with this:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
    }

    .site-logo {
        margin-right: auto;
    }

    .phonebtn {
        order: 1;
    }

    .menu-toggle {
        line-height: 40px;
        order: 4
    }

    #translator {
        order: 10;
        flex: 1;
        justify-self: flex-end;
        margin: 10px 0;
    }

    #translator .switcher {
        margin: 0 10px 0 auto;
    }

    #site-navigation {
        margin-top: 0 !important;
    }

    .top-bar {
        font-size: 16px;
    }

}

Should get us close.
In Customizer > Layout > Primary Nav – you can delete the Mobile Menu label.

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

[Nadine]

thank you so much for this, it really got me far, but I’m still having trouble with the sticky header on mobile. I’m not sure if it’s just caching or if I’m just not hitting the right things.

[Nadine]

I’m so close, the only thing I can’t get sorted is the translator dropdown on the mobile sticky header. I’m not sure why it’s different than the regular header, I can’t find a different class for it in the sticky header.

[David]

Within media query change:

#translator .switcher {
    margin: 10px auto;
}

for this:

#translator .switcher {
    margin: 0 10px 10px auto;
}

and then add this:

.main-navigation.is_stuck #translator .switcher {
    position: relative;
    top: -30px;
}

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

[Nadine]

Thank you so much David! I’m still having some trouble on different phones, but I’ll try again tomorrow to make sure it’s not server caching.

[David]

Its a tricky layout I must admit. Let us know how you get on

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

[Nadine]

It’s still not right on mobile. The sticky header is a bit wonky. The translator dropdown is underneath and the menu is as well.

[David]

What if we use the Mobile Header – it will provide consistency between static and sticky header ?
Theres the inside_mobile_header hook you can use to add your button and translator.

It will still take some CSS. Let me know

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

[Author]

Posts