Jump to content

Removing underline from menu (hover and active)

Go to solution Solved by JayVanDyke,

Recommended Posts

After trying multiple CSS lines of code, I can't get the underline hover to not be displayed. I've tried some solutions from this forum without the CSS code I provided with this post, but didn't change the outcome. At this point I'm clueless on why it's not working, my basic understanding of how CSS works is maybe the reason why haha.

This is the CSS that I've used is to create a pill shaped menu hover and active links and an inverted menu for larger screens. Any help would be greatly appreciated, thanks!

Link to my website: https://jensdemarest.squarespace.com/

/*
===================================
  		INVERTED MENU	
===================================
*/

@media screen and (min-width: 800px) {
  .header {
    mix-blend-mode: difference;
  }
}

/*
===================================
		PILL SELECTION
===================================
*/

.header-nav-item a {
  padding: 5px 12px !important;
  background-image: none !important;
  transition: all ease-in-out .2s !important;
}

.header-nav-item a:hover {
  background: #808080;
  padding: 5px 12px;
  border-radius: 50px;
  transition: all ease-in-out .2s !important;
}

.header-menu {
  .header-menu-nav-item a {
    display: inline-block !important;
    .header-menu-nav-item-content {
      background: none !important;
    }
  }
}

.header-nav-item--active a {
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid #ffffff!important;
  padding: 2px 15px !important;
  border-radius: 50px !important;
  background-image: none !important;
}

 

Edited by jensdmr
Link to comment
  • Solution

That hover animation comes from the Site Styles > Animations > Flex. I honestly had no idea that animation added an underline to the nav links. You can also just change your site animation to something else and it will go away. If you set it to "none" or "fade" or something then your original code might work.

 

This gets rid of the hover if you keep your current settings.

.tweak-global-animations-animation-type-flex .header-nav-item:not(.header-nav-item--folder) a::after, .tweak-global-animations-animation-type-flex .header-nav-folder-item a::after {
  display: none !important;
}

Can you add your code back to the site? It doesn't look like it's there anymore.

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.