Styling Nav Links

The easiest way to style the text links found within the navigation menu is with the typography options found in the Project Settings.

At some point, you may wish to style the text links nested in the navigation bar using custom classes. Simply applying a custom class to the navigation list won’t allow you to style the links inside that list. In order to style the navigation links, we first need to give the parent navigation list a custom class and then use that custom class to reference the links within the list.

1. Select the navigation list and then apply a custom class to it e.g. my-nav-list. You can read more about adding custom classes here.

2. Now use the keyboard shortcut ⌘+6 to open the Class Manager.

3. We now need to create a new class that will reference our navigation list class my-nav-list and then target its children links or a tags. Using the Class Manager, create a second class called my-nav-list a. You will be asked if you want to preserve the spaces in the class name, select yes. You can read about adding custom classes with the Class Manager here.

4. To edit the values of the new class, in the Class Manager class list, Left Click on the settings symbol located to the right of the new class item. This will open the Class Editor which will allow you to directly style the navigation links.

Updated on 9th July 2021

Was this article helpful?

Related Articles