[Resolved] Align hamburger with secondary menu on mobile

Home Forums Support Align hamburger with secondary menu on mobile

  • This topic has 5 replies, 2 voices, and was last updated 8 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1178296
    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

    #1178566
    David
    Staff
    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 🙂

    #1178596
    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

    #1178741
    David
    Staff
    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 */
        }
        
    }
    #1178781
    Lucy

    Fantastic! That works like a dream.

    Thank you!

    #1178785
    David
    Staff
    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.