Aligning Logo to Left and Menu to Right in Mobile Responsive View

  • I’m working on a client site and on desktop it looks fine, but when moving to mobile the logo and menu are positioned in the center and I’d like to have the logo aligned to the left and the Menu button aligned to the right. I’ve tried all of the following CSS code to force the change with no luck. Thanks in advance for your help!

    @media only screen and (min-width: 560px)
    .main-navigation > div {
    background: transparent;
    border: 0;
    border-radius: 0;
    left: auto;
    margin-top: 0;
    padding: 0;
    position: left;
    right: auto;
    z-index: 1;
    }

    #site-navigation {
    position: left;
    }

    .site-branding {
    margin: 0;
    margin-right: 0px;
    }

    #logo .custom-logo {
    margin: 0;
    }

    • This topic was modified 4 years, 4 months ago by James Huff. Reason: redundant link removed

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi,

    I noticed when on mobile, there is a margin-left of 15px and margin-right of 30px, could these be evened out more?

    Also, is it required to have the text ‘Menu’ with the toggle ‘hamburger’? Reason I ask, is the text contributes to the logo and menu appearing centered. Once removed, it appears much more as you’d expect when on mobile.

    If you do decide to remove text ‘Menu’, I’d also suggest adjusting the padding around the #toggle-menu to fit more tightly around the hamburger icon.

    I hope this helps, thank you.

    • This reply was modified 4 years, 4 months ago by gmatzy.
    Thread Starter jssburns

    (@jssburns)

    HI @gmatzy – thanks for the reply!

    I looked into the margin and I think I’ve fixed that issue – thanks!

    I’d love to be able to remove the “Menu” label from the toggle and just have the hamburger, but so far have found no way to do that. If you have any insights or suggestions I’d love to hear them, because I am absolutely stumped. I’ve searched the forum for help to no avail either.

    Sure, glad it helped.

    For the ‘menu’ text, I’d suggest reviewing the theme and seeing how that text is being generated in the <nav>, and once determined and you feel good about it, to remove the text ‘menu’ from <label>

    To assist with this, you can do a search for that <nav>’s id ‘site-navigation’ and /or that <label>’s id ‘toggle-menu’

    I hope this helps, thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Aligning Logo to Left and Menu to Right in Mobile Responsive View’ is closed to new replies.