Jump to content

Disable hover effect on certain blocks but still have them be clickable?

Go to solution Solved by nick_sh,

Recommended Posts

Currently I have a pill style hover effect for all elements of my header dropdown menus, however the pill style appears also on the icons above the text. I wanted to know if there was a css element that allowed for the icons to remain clickable, but disabled the hover effect on JUST the icons. Preferably the text below each icon would remain with the pill style hover effect but it looks a little odd on the icons. Below is the code for the pill style hover. 

 

.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: lightpink!important; 
  padding: 5px 12px; 
  border-radius: 50px; 
  transition: all ease-in-out .2s !important; 

Screenshot (15).png

Link to comment
  • Replies 6
  • Views 210
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

34 minutes ago, nick_sh said:

Try this instead of the 2nd block:

 

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

 

Ah fantastic thank you, just one last thing, is there a way to make the hover pill not break in two like?

Screenshot (16).png

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.