Creating a underline hover effect for your navigation links in the Five Template

The Five template can be a little tricky when it comes to customize when it comes to the navigation. The only work around I got to creating an underline hover effect for your navigation links is by disabling the last navigation button.

Below is all of the steps you’ll need to take in order to make this code work.

step 1 | Disable the last navigation button.

Click on DESIGN > SITE STYLES. Then you’ll want to find the option “Enable Nav Button” under the site navigation section. Uncheck this option, and click SAVE.

step 2 | add the custom code.

Click on DESIGN > ADVANCED > CUSTOM CSS. In the CSS section, paste the code below.

.collection:hover {
  border-bottom: 2px solid #ffffff;
}

The hover effect will allow you to underline the links within your navigation area.

step 3 | changing the color of the underline and thickness of the underline.

Change the thickness of the underline: Change the “2”. Anything higher than 2 will increase the thickness of the line. Anything below 2 will decrease the thickness of the line.

Change the color of the underline: You will want to change the hex number “#ffffff”. For example, if you are looking to change the underline to black, you will change the hex code to #000000.

step 4 | Save your code

Make sure you save any changes you make within the Custom CSS so that you don’t lose any of the new edits you have made to your website.