Adding underline hover effects to navigation bar, and dropdown menu

Site URL: https://www.patrickpilato.ca/

Hi there, i would like to add white underline hover effects to my navigation bar, as well as on the drop down menu.

I have already used code to make the menu and the dropdown menu transparent.

I have found the codes to add hover underlines to the navigation bar, but i would like to customize it (make it a thicker line, and create space between the link and the line)

Add the following to Design > Custom CSS.

.header .header-nav-wrapper a {

  padding-bottom : 1em;
  
  }

.header-nav-item a:hover {

  border-bottom-width : 5px !important;
  
  }

This is for v7.1.

You can of course change the number values to suit your needs.

Let us know how it goes.

On 4/4/2021 at 8:57 PM, creedon said:

Add the following to Design > Custom CSS.

.header .header-nav-wrapper a {

  padding-bottom : 1em;
  
  }

.header-nav-item a:hover {

  border-bottom-width : 5px !important;
  
  }

This is for v7.1.

You can of course change the number values to suit your needs.

Let us know how it goes.

Awesome thank you!