[Resolved] push menu button to the right

Home Forums Support push menu button to the right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #939816
    Joel

    Hi guys,

    Just wondering how to push my main menu ‘log in’ button to the right…?

    Currently, the button has the ‘nav-button’ css class. I was given this code originally and not sure why it’s stopped working:


    @media
    (min-width: 768px) {
    .inside-header, .main-navigation ul {
    display: flex;
    }
    .main-navigation {
    flex: 1;
    }
    .main-navigation li.push-right {
    margin-left: auto;
    }
    }

    Any help would be much appreciated 🙂

    Thanks,

    Joel

    P.S. When I try adding the ‘push-right’ css class alongside the ‘nav-button’, it pushed it too far over to the right of the screen

    #939834
    Leo
    Staff
    Customer Support

    Hi there,

    Can you add the push-right class so I can see the issue?

    Let me know 🙂

    #940252
    Joel

    Hi Leo,

    Just added for you to see.

    Thanks,

    Joel

    #940351
    David
    Staff
    Customer Support

    Looks like its working to me. Do you want the rest of the navigation to be centered between the logo and the button?

    If so include this CSS in your media query ie. before the last closing } :

    .main-navigation li:first-child {
        margin-left: auto;
    }
    #940388
    Joel

    It was just that it looked like it was quite far to the right in comparison to other elements on the page and footer widgets?

    #940398
    David
    Staff
    Customer Support

    The inside header container is the same width as your content, and has the same padding. So menu button is aligned with the right hand edge of your content.

    If you want to move it in a little then change this part of the CSS:

    .main-navigation li.push-right {
        margin-left: auto;
        margin-right: 40px; /* Add this property and adjust 40px to suit */
    }
    #959951
    Joel

    Thanks David!

    #969798
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.