[Resolved] push menu button to the right

[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

[Leo]

Hi there,

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

Let me know 🙂

[Joel]

Hi Leo,

Just added for you to see.

Thanks,

Joel

[David]

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;
}

[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?

[David]

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

[Joel]

Thanks David!

[David]

You’re welcome

[Author]

Posts