Modifying hover/active navigation link text

Hi all!

I'm hoping to get some help adding some custom features to my navigation links. I'd love to be able to add brackets to any navigation link that is being hovered on or is active. 

Example)

unactive:        ABOUT

hovered:       [ABOUT]

active:           [ABOUT]

Thank you for any help!! I've already disabled the underline with custom CSS, but I wasn't sure if this was possible to do.

7 hours ago, lopezworks said:

Hi all!

I'm hoping to get some help adding some custom features to my navigation links. I'd love to be able to add brackets to any navigation link that is being hovered on or is active. 

Example)

unactive:        ABOUT

hovered:       [ABOUT]

active:           [ABOUT]

Thank you for any help!! I've already disabled the underline with custom CSS, but I wasn't sure if this was possible to do.

Can you share your website URL? It will easier to give the solution.

10 hours ago, Web_Solutions said:

Can you share your website URL? It will easier to give the solution.

Yes! It's https://www.lopezworks.com 

3 minutes ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.header-nav .header-nav-item a:before {
  content: "[";
  opacity: 0;
  transition: 0.2s;
}
.header-nav .header-nav-item a:after {
  content: "]";
  opacity: 0;
  transition: 0.2s;
}
.header-nav .header-nav-item a:hover:after, .header-nav .header-nav-item a:hover:before, .header-nav .header-nav-item--active a:after, .header-nav .header-nav-item--active a:before {
  opacity: 1;
  transition: 0.2s;
}

 

Wow!! thank you so much, this is awesome.

3 minutes ago, lopezworks said:

Wow!! thank you so much, this is awesome.

Welcome!