-
When having smaller display resolutions on desktop, some menu items cannot fit the available space.
Wondering how to automatically place them into the submenu of the last menu item?
Example of such behavior:
- Visit https://www.bbc.com
- Click the last menu item ‘…’
- Slowly resize the browser window to make it smaller
- You will see how menu items automatically vanish from the main menu and are being moving to submenu of the last menu item ‘…’
-
Hi there,
it requires custom javascript to do that , and unfortunately its not something we have in our snippets bag.
-
Could you kindly include it in the feature request list? Thanks.
-
Would you like to raise a feature request ?
IF so you can do so here: -
How to at least hide menu items which cannot fit, both in primary and secondary menu?
-
Can i see the site you need to make this change to ?
As theres no “auto-magical” way to do this kind of thing. -
It’s not in production, but it is based on https://gpsites.co/info
-
The info template only has one navigation, and I’m not sure if you’ve modified the Navigation/site header area, so I will have to see your site to see the possibilities.
So please link us to your site, if it’s in local development, please link us to your site when it’s online.
-
Using browser console you can add more items into primary menu in Info template.
When it has more that 12 menu items, it breaks into two rows.
What CSS to add to avoid it, i.e. to hide menu items which cannot fit, so everything remains in one row?
-
Try this:
.main-navigation .main-nav>ul { flex-wrap: nowrap; } .main-nav { max-width: 100%; overflow-x: hidden; } -
-
So can you tell me what layout you want?
You can use a screenshot with comment or show me a mock up.
On the BBC site, I don’t see the effect you are talking about, but it sounds like require custom JS which is out of the scope of the support forum.
Let me know 🙂
-
Want to hide menu items which cannot fit, so everything remains in one row, no matter how menu items exist:
https://prnt.sc/MKVEPz_tbkAp -
Try this:
@media(min-width: 769px) { .main-navigation .main-nav>ul,.main-navigation .inside-navigation { flex-wrap: nowrap; } div#primary-menu { max-width: calc(100% - 55px); overflow: hidden; } nav#site-navigation { max-width: calc(100% - 30px); } .main-navigation .main-nav > ul > li { flex-grow: 0; flex-shrink: 0; } }
- You must be logged in to reply to this topic.