Topic: Float last menu item to the right

roslindale
September 21, 2023 at 5:45 am

Hi,

Do you know of a more elegant way of “floating” the last menu item to the right in the NAV other than assigning a class and adding a big left margin? Please see the image: https://postimg.cc/kByVDpQm

Thanks!
David
September 21, 2023 at 6:19 am

Hi there,

yes, it still requires CSS but you can use auto margins and last-child selectors to do it.
Can i see the site you want to apply it to ? As the layout will determine the necessary CSS.
roslindale
September 21, 2023 at 6:38 am

Thanks David! The beta site is here: https://milltownweb.com/aurum/

Ying

September 21, 2023 at 8:17 am

try this CSS:

@media(min-width: 769px) { 
nav#site-navigation, .inside-navigation,.main-nav {
    width: 100%;
}
.main-navigation .main-nav >ul {
    justify-content: space-between;
}
.main-navigation .main-nav >ul>li:last-child {
    margin-left: auto;
}
}

roslindale
September 21, 2023 at 8:25 am

Thanks so much Ying. It works great! 🙂
Ying
September 21, 2023 at 9:27 am

You are welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Float last menu item to the right