Float individual menu item

Support
#1

Hi is it possible to float individual menu items to the left or right.

I’d like my main menu on the left next to my logo and my shopping cart icon and account icon on the right.

Any help with the CSS would be much appreciated. I can replace the .menu-item-id with the correct IDs once I have the code.

Example: https://stefanguy.com (the example is not using xtheme but I’d like to achieve the same result with xtheme. If possible).

Thank you!

#2

Hi Stefan,

This is possible with custom CSS but it depends what’s the structure of your header.

Is there a chance that you can provide a link to the site you’re working on so that we can check and provide a more accurate suggestion?

Thank you.

#3

Yes, thanks I’ve added a link to the first message in a secure note. Please let me know if I’ve done this correctly. Thanks

#4

Hi Stefan,

Please try this in X > Theme Options > CSS:

@media (min-width: 980px) {
    .x-nav-wrap.desktop {
        flex: 7;
    }

    .masthead-inline .desktop .x-nav {
        float: none;
        display: flex;
    }

    .x-navbar .desktop .x-nav>li {
        float: none;
    }

    .x-navbar .desktop .x-nav>li.call-to-action {
        flex: 1;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Here are some related links of the suggestions above for further reading:

Hope this helps.

#5

Amazing! That worked perfectly!

Thank you for the great support Jade!

Have a great day!

#6

You’re most welcome, Stefan.

Have a great day too! :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.