Archived topic

push menu button to the right

7 replies · Started by Joel on June 24, 2019

Viewing posts 1–8 of 8

June 24, 2019 at 10:52 am #939816

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

June 24, 2019 at 11:17 am #939834

Hi there,

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

Let me know :)

June 25, 2019 at 1:38 am #940252

Hi Leo,

Just added for you to see.

Thanks,

Joel

June 25, 2019 at 3:16 am #940351

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

June 25, 2019 at 3:57 am #940388

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?

June 25, 2019 at 4:06 am #940398

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

July 17, 2019 at 1:54 am #959951

Thanks David!

July 29, 2019 at 1:28 am #969798

You're welcome

This archived topic is closed to new replies.

Start building better websites today.