Hover effects for navigation links

Can someone post the css code to add the hover effects into the navigation links like changing color or opacity?

This used to be easy to accomplish on version 7 in templates but I don't know how to code it into my site on 7.1

Add to Design > custom CSS

/* nav hover */
.header-nav-item>a:hover {
    color: red !important;
}
.header-nav-folder-item:hover a {
    color: red !important;
}

Hi Tuanphan

The custom CSS works well. Thank you, solved one of my issues. How do you make text additionally bold on hover in CSS?

Kind regards,
Sibylle

On 4/18/2021 at 1:54 AM, Sibylle said:

Hi Tuanphan

The custom CSS works well. Thank you, solved one of my issues. How do you make text additionally bold on hover in CSS?

Kind regards,
Sibylle

 

Use this

/* nav hover */
.header-nav-item>a:hover {
    color: red !important;
	font-weight: bold !important;
}
.header-nav-folder-item:hover a {
    color: red !important;
	font-weight: bold !important;
}

@tuanphan Do you know how to add an image background when hovering over the navigation links?

Website: roughcutbrewing.com

On 1/19/2022 at 9:50 AM, brigidc.campbell said:

@tuanphan Do you know how to add an image background when hovering over the navigation links?

Website: roughcutbrewing.com

Add image + Hide text, or add image + keep text?

@tuanphan I would like to add an image on hover and keep the text

17 hours ago, brigidc.campbell said:

@tuanphan I would like to add an image on hover and keep the text

Add to Design > Custom CSS

div.header-nav-item a:hover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
div.header-nav-item:nth-child(1) a:hover {
    background-image: url(https://cdn.pixabay.com/photo/2018/07/28/02/26/puffins-3567175__480.jpg);
}
div.header-nav-item:nth-child(2) a:hover {
    background-image: url(https://cdn.pixabay.com/photo/2022/01/18/16/49/town-6947538__340.jpg);
}

@tuanphan Thank you this worked great!!

On 3/1/2021 at 3:00 PM, tuanphan said:

Add to Design > custom CSS

/* nav hover */
.header-nav-item>a:hover {
    color: red !important;
}
.header-nav-folder-item:hover a {
    color: red !important;
}

 

@tuanphan Hi Tuan and first of all thank you so much for your great support for everyone here! I used this css and it worked great for my navigation menus except one. I have a page called About 2 in which I have inverted the colors (you'll see). And on that page the hover navigation code isn't working.  It's also doesn't wotking on the mobile view. How can I solve this?

https://flute-teal-7fwk.squarespace.com/config/

Password: purplebutterfly

Update: I have the same issue with my title hover effect and color as well.

On 6/3/2024 at 11:46 PM, kkf_magi said:

@tuanphan Hi Tuan and first of all thank you so much for your great support for everyone here! I used this css and it worked great for my navigation menus except one. I have a page called About 2 in which I have inverted the colors (you'll see). And on that page the hover navigation code isn't working.  It's also doesn't wotking on the mobile view. How can I solve this?

https://flute-teal-7fwk.squarespace.com/config/

Password: purplebutterfly

 

 

Update: I have the same issue with my title hover effect and color as well.

I see it is fine on About 2 page

@tuanphan  Thank you for the response. Yes, all hover effects are fine now except the mobile view of the About 2 Page.  Probably I have made a mistake in the css code somewhere. I'm attaching the code for About 2 Page:  

<style>

  
  #block-yui_3_17_2_1_1717149715486_3373 p {
      font-family: 'Arial' !important;
    
  }
  

#block-979157697c9f4e2b8b39 p {
      font-family: 'Bebas' !important;

  }

  
  
  
  
  
  
  
  
  
  
  
   .burger-inner>div {
      background-color: black !important;
  } 
  
  
 
  
  
  
  
  
    #collection-665990f3dafef7079b061afa header#header.shrink {
  background: white !important;
}
 
  
  
  .header-nav-folder-content {

   background: white !important;

}

#header a {color: black !important;}
  
  
  
  
 
</style>

My idea on this About 2 page was just to invert the black and white colors (for the main navigation and basically everything that is white to become black and vice versa) and to change the font of my bio text (which I was able to do) and nothing more.

Thank you!

On 6/5/2024 at 6:01 PM, kkf_magi said:

@tuanphan  Thank you for the response. Yes, all hover effects are fine now except the mobile view of the About 2 Page.  Probably I have made a mistake in the css code somewhere. I'm attaching the code for About 2 Page:  

 

 

<style>

  
  
  
  
  
  
  

  
  #block-yui_3_17_2_1_1717149715486_3373 p {
      font-family: 'Arial' !important;
    
  }
  

#block-979157697c9f4e2b8b39 p {
      font-family: 'Bebas' !important;

  }

 

  
  
  
  
  
  
  
  
  
  
  
   .burger-inner>div {
      background-color: black !important;
  } 
  
  
 
  
  
  
  
  
    #collection-665990f3dafef7079b061afa header#header.shrink {
  background: white !important;
}
 
  
  
  .header-nav-folder-content {

   background: white !important;

}

#header a {color: black !important;}
  
  
  
  
 
</style>

 

 

 

My idea on this About 2 page was just to invert the black and white colors (for the main navigation and basically everything that is white to become black and vice versa) and to change the font of my bio text (which I was able to do) and nothing more.

 

Thank you!

You mean change background black to white, and change nav items from white to black?

@tuanphan No, all colors are perfect. In mobile view in all pages that are black, the hovering red effect is there. But when I'm in the About Page (the white one),  the hovering effect doesn't work when browsing on the menu - there is no red color at all.  And I don't know how can I fix this.

You can use this CSS code

div.header-nav-item--active>a, div.header-menu-nav-item--active div {
    color: #de3163 !important;
}