How to edit the Arbutus template nav
Troy Kasting avatar
Written by Troy Kasting
Updated over a week ago

The Arbutus template will support a unique nav designed for a single page website. The unique nav allows you to link to sections of the homepage instead of to other pages on the site.

The navigation will look like this. It appears below the marquee image instead of at the top of the page. The normal navigation has been disabled under Website > Header Settings.
โ€‹

The nav is actually just a Card Row block with each "card" comprised of only a label and link. You can change the label text and the block each nav item links to. The string after the hash symbol will be used as the ID in the block it's linking to. For example, in the screenshot below we see that the Link URL value is #section_about. In this case, we need to make sure that section_about is used as the ID in the block used for the "About" section.
โ€‹

To connect the nav with the various blocks a CSS class has been added. If you edit one of the connected blocks, say the Image Highlight block used for the "About" section, you can see the special ID that was added on the Advanced tab.

WARNING! Be careful when you make edits. If any of the values set in the Card Row block don't match the values used for the ID in the corresponding blocks the nav will stop working.

To add a new nav item, a new card to the Card Row nav block. Next make sure that only the Link Text and Link URL fields have values. The Link URL value must start with a hash symbol (#). Copy the string you enter after the hash symbol and add it to the Element ID field on the block you'd like the new nav item to link to.

Did this answer your question?