SubNav

Hi everyone!

How do I add a unique sub-nav to each page on my site?

I want the nav/sub-nav to be sticky (so it stays with scrolling). The nav is done and working just fine. Each link in the nav goes to a different page. The sub-nav should link to anchor points along the page.

I put the nav in the universal header space so it appears on all pages.

I created a sub-nav that links to anchor points, but I didn’t put it in the universal header, that way I could make it unique on every page.

The only problem is that I can only seem to make the main nav sticky. I cannot figure out how to make the sub-nav sticky.

I’ve included a screenshot of my nav/subnav for a page (I need to add more links to my sub-nav - so don’t worry!).

Than

k you!

I got it to almost work by using this code:

.findings { z-index: 10; position: fixed; } .stuck { position: fixed; top:0; width: 100%; }

I am a super beginner at coding so I dont fully understand why it worked - I copied and pasted and tweaked someone else’s code.

The only thing I can’t sort out is how to make the subnav active state (like the main nav).

I don’t think you need any coding to do this. From what I can see, you don’t actually need a drop-down sub menu at all. A drop-down usually comes into play when you click a main menu item (it literally drops down from the main navigation link). If the main navigation is made sticky, any drop-down menu will also stick to the main navigation and will always be available. The same is true if you add the navigation to the top global area, only now it is available on ALL pages of your site.

If I’ve understood you correctly, you need to have a sub-menu that sticks to the top of the page, but that can be changed on a page by page basis. (i.e. different anchor links on each page). If this is correct, simply create your main navigation bar with your page links. Don’t add any drop-down menus. Once your nav bar is made, add another ROW immediately below the row containing the main navigation. The easiest way to do this is to select the ROW containing the main navigation and duplicate it. This will create another navigation bar under the first one. Delete the content from the duplicate ROW and add a normal text bric. Create your sub navigation as a line of text with spaces between each item (I use a character such as a vertical line to segregate the items - see illustration below) You can now highlight each text item individually and turn them into links. This is what my navigation block looks like:

You can style the sub-menu by adding a custom class to the column and giving it a background colour. You can also adjust the text padding and colour through the same custom class.

This is now a navigation BLOCK. It can be made sticky by simply setting the sticky option in the properties panel at the right of the screen.

What happens next depend on how you want your sub-navigation to work. Clearly, if you want different sub-navigation items on each page, your navigation block will have to be moved from the top global area into the dynamic area. This will allow you to edit the submenu on each page. The problem here is that you have to create the whole navigation block on every page of the site. To save you a lot of work, it’s best to keep the navigation block in the global area so that it appears on every page of your site. You would then duplicate the whole block and move the duplicate into the dynamic area of the page. Do this on every page of your site before deleting the global area navigation block. You will now have a navigation block on every page and each one can be edited independently on a page by page basis. The only thing you’re likely to change is the sub-menu on each page.

Here are some tips on how to enhance this type of menu to make it work more intuitively, particularly if only some of your main pages are going to have a sub-menu. For example, in your illustrated main menu you only have two items that have sub-menus. Clearly, you won’t want a sub menu to display on the other pages.

The first thing you would do is change the source of your menu from Primary to None. Ideally you would do this before removing the navigation block from the global area. Once you’ve duplicated your navigation block to the dynamic area, you will be free to edit each navigation label to whatever you want. You could also hide the sub menu using the visibility option. On pages where you have sub-menu choices, you would unhide the sub menu on those pages only. This is what the visibility options look like:

Screenshot 2020-08-01 at 02.27.47

By using this option, your sub-menu will only display on pages where there is sub-menu choices.

If you wanted your visitors to click a main navigation link to display the sub-menu, you would use the visibility option to hide the sub-menu on ALL pages. You would then add an indicator to the main navigation link ONLY ON THE PAGES WHERE THE SUB-MENU IS TO BE AVAILABLE. In the example blow, I’ve edited the link to include a down-arrow to show that a sub-menu is available on that particular page.

Screenshot 2020-08-01 at 02.35.42

On all the other pages, I would remove the down arrow from the link label - it won’t be needed until someone reaches Page 2. The Page 2 link ON PAGE TWO would be changed to make the sub-menu visible. On all other pages, it will simply point to Page 2.

Hopefully, this will give you some food for thought.

3 Likes

@hendon52: Thank you, this was incredibly helpful and I plan to try it out tomorrow! Thank you for all the great timesaving tips!

Just one side note: I did notice that the “Sticky” checkbox does disappear once the nav is taken out of the global area. Does yours disappear also? That is the issue I’ve been facing and why I think coding may need to be involved. Maybe when I follow your instructions though tomorrow, I will find I am incorrect!

@MicaZmuera No, the sticky option should remain available even after moving the navigation bloc. Remember the sticky option is applied to the whole bloc containing the navigation bar, so you have to move the bloc containing the navigation, not just the nav bar itself.

It worked perfectly once I sorted out how to move it out of the global area. Thank you!