Navigation bar issue

#1

Hi you all,

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?

This is what the problem situation looks like:

image
image2162×1420 403 KB

Very messy. I would much appreciate your insights!

Thanks,

Jim

#2

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?

Rob

6 Likes
#3

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.

1 Like
#4

Hi Rob,

Thank you. Any idea how/where to change the breakpoint?

Jim

#5

That is not a feature of the stack. This is to keep consistent breakpoints for all stacks within Foundry across the board.

#6

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?

Thx., Jim

#7

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:

https://foundry.elixirgraphics.com/tutorials/

1 Like
#8

Hi Adam,

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:

  1. How do I add a menu item to the Nav Bar without that item being a page?

  2. How do I create a dropdown menu under that new Nav Bar item?

Thanks!

Jim

#9

Using the Navigation Bar each item is based off of a page. To have an item in the navigation it has to be a page.

If you want a manually curated navigation bar take a look at Mega Menu, which comes as a part of the Potion Pack addon for Foundry.

Same as above.

#10

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.

2 Likes
#11

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.

#12

Thank you Adam for your always prompt and to the point support. Foundry is very easy to use, but is all the more fun to use due to your strong help.

1 Like
#13

Excellent. I will give that a try. Just downloaded Potion (including Mega Menu). Thank you!

#14

Sorry, only saw your post just now. I will also try this. Thank you very much!

#15

Worked like a charm. Thanks again. By the way, “Product” now has a little arrow behind it. Do you know if this can be removed? If so, how?

#16

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.

#17

I do not have any plans to make it optional. Like @DLH I think it is important to indicate what parent items have child items in a drop down.

#18

I agree that it is a good idea to show it’s a dropdown title but it does not look clean. Would it be hard to custom CSS it out?

#19

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’.

#20

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.

2 Likes