I am building a site with Foundry/Stacks. When the screen size hits the smaller tablet widths - so somewhere between larger tablet and mobile - the navigation bar’s menu items space becomes too small to show all the menu items in one row. However, in stead of folding all the menu items into a hamburger (vegan) icon, it displays them over two rows. This looks very ugly. I would want to avoid showing two rows and rather have it go to the hamburger solution as soon as the menu items do not fit one row anymore. Does anybody know how I can fix this?
I’m sure you can change the break point so that it goes straight from the horizontal navigation to a hamburger-style menu but I think the real problem is that you have too many top level menu items IMHO. Any way you can put some of them under a single menu as a drop down?
This advices from @robbeattie is very good. The top level of your navigation is overwhelming. It has a lot going on there. You want to focus your visitor’s attention into the most important things with the parent level navigation and use drop downs, or links elsewhere on the page (maybe a vertical nav in a sidebar, or something similar) to filter the visitor into the other sub pages of the site.
Hi Adam, OK I will gather some items under the new menu item “product”. But how then do I create that menu item called “product” while that is not a page. And how do I make drop down menu under that new menu item?
If you’re using the Navigation Bar stack then the page hierarchy is determined by the way you next your pages in RapidWeaver’s page list. We’ve got lots of Foundry tutorial videos on the Foundry site, including one on using the Navigation Bar even. Give the tutorials page a look:
Thank you. I am aware of that tutorials page, which has helped me a lot over the last few months. I just re-watched the Nav Bar tutorial, but unfortunately it does not address my questions.
To be clear, I would like to group some of my menu items under the name “product”. Mind you, ‘product’ is not a page on my site. Two questions:
How do I add a menu item to the Nav Bar without that item being a page?
How do I create a dropdown menu under that new Nav Bar item?
In Foundry, a top-level menu is not clickable. So, even if you add a page “Products” and place two child pages under it, visitors will only be able to get to the sub pages. The Products page ends up just being a menu placeholder.
As Adam mentioned, NavBar uses the built-in RW page heirachry to build it’s menus. So, just add a new page for Products and then drag and drop the pages you want to be sub-pages on the Products page in the left sidebar. RW will indent them to show they are sub pages. That’s all you’d need to do for this to work with NavBar.
As mentioned, use Foundry Mega Menu. it will enable you to easily build a manual menu, with parent (dropdown) items.
It too uses the same set breakpoints as the rest of the Foundry stacks, so you can’t manual decide when it switches from full desktop to mobile hamburger. So, instead, use two instances of the menu inside visibility stacks, set to hide and show at the breakpoint that suits you. Doing this means you can focus the design on each menu on the screen size it’s intended for.
I do this here: https://www.mailshotmonkey.co.uk/ On screens over about 760px wide Megamenu is used pretty much as standard, with some dropdowns etc. Below 760 this menu is hidden entirely and a new one, which sits below a full width version of the logo (again hidden on larger screens) appears with no parent/dropdowns, as in most cases you don’t need these on mobile.
Taking this approach works around the built-in “rules” of Mega Menu and also give you more control over the finished product.
There isn’t an option in NavBar (or MegaMenu) to not display the “>” after the dropdown title. I don’t know if @Elixir has any plans to make that optional. Personally, I think it’s a good idea to indicate to visitors that the menu is a drop down and has choices below it.
If you really don’t want it, we could probably figure out some custom CSS to remove it.
Many top websites do not use such a dropdown indication and, again, I think it is not ecstatically pleasing. It’s not clean. So I would appreciate the option to not show it but as the great philosopher House said: "As the great philosopher Jagger said: ‘You can’t always get what you want’.
I personally think people put a little too much emphasis on look over functionality. In fact, I just took it off one of my sites, and I missed it immediately, even the look. With a clean menu, I think it looks good. Anyway, you have to be happy with your site.
This should work:
nav.navigation_bar ul > li > a.parent::after {display:none !important;}
You may not need the important, so try without first.
Edited: Took out an errant quote in the code. Not sure how it got there.
