Archived topic
Disable 'menu-item-float-right' on mobile menu
7 replies · Started by Daniel on March 17, 2021
Hello,
I am using the menu-item-float-right CSS Class on one of my Primary Menu items and it looks great on Desktop. On mobile, however, that menu item is still floating to the right of the hamburger menu, looking like it is stuck in the bottom-right corner.
Is there a way to disable the float on the mobile menu, so that it looks the same as the other vertical menu items, text aligned left, carrot aligned right?
Thank you.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Sure. See below.
Hi Daniel,
Try this CSS:
@media (max-width: 768px) {
.inside-navigation #primary-menu .sf-menu>li.menu-item-float-right {
float: none !important;
padding-left: 0;
}
}Let me know :)
Hi Ying,
This is close but presents a new issue. The menu item is now aligned to the left of the mobile menu, however, it doesn't span the full width of the menu. So, the background color ends about 2/3 of the way across and the dropdown carrot is right in the middle of the menu, instead of the right side like the other menu items.
Getting there, thanks!
Try to add this CSS:
body .main-navigation.toggled .sf-menu>li.menu-item-float-right {
display: block;
}Boom! That did the trick. Your customer support is the absolute best, thank you! :)
You are very welcome :)
It's our pleasurer!
