[Resolved] Align hamburger with secondary menu on mobile

Home Forums Support Align hamburger with secondary menu on mobile

This topic contains 5 replies, has 2 voices, and was last updated by  David 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1178296


    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


    David Customer Support

    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 🙂



    Ideally something like this:


    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.



    David Customer Support

    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 */


    Fantastic! That works like a dream.

    Thank you!


    David Customer Support

    Looks great – glad to be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.