My css skills aren't great, but for the life of me can't figure out how to make these not wrap at certain size. Even if I decrease font size, they still wrap, and white-space: no-wrap does nothing either. Obviously I'm missing something :)
You can use the below custom CSS script (Navigate to Salient > General Settings > CSS/Script Related:) to get the desired experience.
#top nav > ul.sf-menu {
white-space: nowrap !important;
overflow-x: auto;
}
#top nav > ul.sf-menu > li {
white-space: nowrap !important;
}
#top nav > ul.sf-menu > li > a {
padding-left: 10px !important;
padding-right: 10px !important;
white-space: nowrap !important;
font-size: 14px !important; /* you can adjust this in case you need to */
}
Yay! Thanks, Noah! Looks great :) Smaller size globally is fine too so don't need to just adjust for mobile. Saved in my notes too for future. Appreciate it!
My css skills aren't great, but for the life of me can't figure out how to make these not wrap at certain size. Even if I decrease font size, they still wrap, and white-space: no-wrap does nothing either. Obviously I'm missing something :)
Attached files: Menu Items Wrapping.jpg
Hi Laurie,
Thank you for getting back.
You can use the below custom CSS script (Navigate to Salient > General Settings > CSS/Script Related:) to get the desired experience.
#top nav > ul.sf-menu { white-space: nowrap !important; overflow-x: auto; } #top nav > ul.sf-menu > li { white-space: nowrap !important; } #top nav > ul.sf-menu > li > a { padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap !important; font-size: 14px !important; /* you can adjust this in case you need to */ }Kindly try it out and let me know how it goes.
Thanks.
Yay! Thanks, Noah! Looks great :) Smaller size globally is fine too so don't need to just adjust for mobile. Saved in my notes too for future. Appreciate it!
Hi Laurie,
Thank you for the positive response.
Happy Coding!