Hi have a webpage that has a lot of pages, and if I add more the Nav Bar goes onto two lines. I don’t mind that so much, but the spacing in Foundry doesn’t seem to adjust, and as a result the second line of the nav bar is on top of the page content and covering it.
I am not a fan of submenus, which I know is the “proper” way of doing it. While I could create a page and hardwire the subpages as it’s own top image, maybe using a tab stack or something, what I am really wondering is if there is a standard way to have the standard sticky navigation take two lines (or more) and not interfere with the next stacks on the same page.
What really bugs me is when on a phone and you get the arrow > to open the submenu, and so you can never see what is underneath. If there were a way to automatically open all subpages, that would be a good improvement, imo, since you are in the open menu already, and it would avoid extra clicks.
Its really quite hard to understand the issue or visualise what you want without seeing what you actually have at the moment. Not to mention, impossible to ascertain what stacks you are using.
The site I am referring to is www.oboestudio.com but the behavior I am describing is very generic.
If you go to that page and move the right edge in to make the window smaller, you will see the sticky navigation become two lines. Move slowly! If you make it too small it will turn into the hamburger icon, but just before it changes the nav bar is two lines. You will see that the nav bar also covers the stack content.
I don’t mind having two rows of navigation. I’d rather have that than submenus. But if it covers the content, then it isn’t a workable choice. Of course, I could put a lot of padding at the top of the stack, but I suspect that will look pretty weird, and worse on a phone. Ironically, there is no problem on a phone with having lots of pages, because the hamburger opens and collapses just the same. This problem is only visible on a larger display like a computer.
Wrapping content in a navigation bar is a sign that your content exceeds the available horizontal space. It is not designed to be two rows. The wrapping effect is caused by an excess of content. You’ll want to trim down the number of items within the top tier navigation, perhaps by making some of those items into nested child items, which will turn into drop downs.
As commented above, it’s, as you say, a generic issue, in so far as you just have too many things in the menu. Some menus allow you to adjust the point at which the menu flips from full to mobile but Foundry works along set breakpoints, so you’ve no control over it.
Your only getting one item wrapping beforethe menu breaks to the mobile version, so a few options…
Reduce font size. 1pix down should be it.
Change the menu items from all caps to cap/lowercase.
Reduce the padding on each item.
If it’s any use to you, after having a look around the site, personally, I’d condense the number of pages down a bit. For instance, I’d merge the songwriting and about page into one. But obviously, this is all just a personal view.
In addition to the suggestions made by @TemplateRepo , you could delete the contact page and add this info in a footer. Contact info is important and should always be available on every page of your website.