[Resolved] Align hamburger with secondary menu on mobile

[Lucy]

Hi there

I’m trying to get the order of elements in the header on mobile to be secondary navigation, followed by primary navigation (burger), followed by logo.

I have tried extrapolating from this discussion: https://generatepress.com/forums/topic/secondary-menu-in-mobile-view/ but I can’t get that burger menu to sit to the right of the secondary navigation – it always stays at the top.

It’s possible that once I see how it looks, I might want it to the right of the logo but I assume if I can get it away from that top position deciding whether it goes after the secondary navigation or after the logo should be easy!

Many thanks
Lucy

[David]

Hi there,

are you able to provide a mockup image of how you ideally would like them displayed – maybe i am misinterpreting but i cannot see how they would all fit … let me know 🙂

[Lucy]

Ideally something like this:

https://www.dropbox.com/s/vws6glofrr7l6io/mockup.jpg?dl=0

Of course, I also need to work out how to show only the icons for the phone/email but one step at a time!

If you have suggestions for any better ways of laying it out they’re welcome to 🙂 It’s a client request so just trying to find something that everyone’s happy with.

Thanks
Lucy

[David]

That looks great 🙂
Lets give this CSS a try.

@media (max-width: 768px) {

    /* align flex nav elements vertically center */
    .inside-header {
        align-items: center;
    }

    /* flex order secondary nav to firt position */
    /* margin-right auto to force space between 2 navs */
    .site-header .secondary-navigation {
        order: -1;
        margin-right: auto;
        margin-bottom: 0 !important
    }

    /* Use flex to vertiaclly align icons and button */
    .site-header .secondary-navigation ul {
        display: flex;
        align-items: center;
    }

    /* Remove menu labels with font 0 have and increase icon size */
    .secondary-navigation .main-nav ul li.top-nav-email a, 
    .secondary-navigation .main-nav ul li.top-nav-telephone a {
        font-size: 0;
        background-size: 35px;
    }

    /* Force site logo to occupy its own row and optional alignment */
    .site-logo {
        flex: 1 0 100%;
        margin-top: 10px;
        text-align: right; /* Position image left, center, right */
    }
    
}

[Lucy]

Fantastic! That works like a dream.

Thank you!

[David]

Looks great – glad to be of help 🙂

[Author]

Posts