1. Home
  2. Using Blocs
  3. Design
  4. Styling Nav Links With Custom Classes
  1. Home
  2. Troubleshooting
  3. Styling Nav Links With Custom Classes

Styling Nav Links With Custom Classes

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 16th October 2018

Was this article helpful?

Related Articles