Hover effects for navigation don't work on a Single Page

Hi!

I added  hover effects for navigation and title on my site, but I have the following issues:

1. I have an "About 2" Page on which the css doesn't work (there isn't any hover effect at all) - this page is specific because I inverted the colors. 

2. These hover effects don't work on the mobile view at all.

3. The title hover effect doesn't work as well on mobile view and About 2 Page.

Here are the css I used:

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

.header-title:hover a {
  color: #DE3163 !important;
  font-weight:bold !important;
  transition: 1s all
}

How can I fix this?

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

Password: purplebutterfly

Thank you!

@LesumSam, thank you so much again for your great help! Your code fixed everything! I have just one more question - is there a way to add a frame to my folder dropdown menu like the attached pic? You are the hero today! 🙂

@kkf_magi Hi! Try this code to add a frame/border around folder dropdown menu

#header .header-nav .header-nav-item--folder .header-nav-folder-content {
    border: 1px solid #DE3163 !important;
}

@Lesum Thank you so much again! The css works great, but I don't know why the previous css for the hovers dissapearred on About 2 page when I pasted it... Without the frame code, the hovers work fine

11 minutes ago, kkf_magi said:

@Lesum Thank you so much again! The css works great, but I don't know why the previous css for the hovers dissapearred on About 2 page when I pasted it... Without the frame code, the hovers work fine

The code for the frame shouldn't affect the previous code. Can you try adding the code for frame after all the you've added so far?

@Lesum   Probably I have inserted something wrong the previous time because now it's perfect. Many many thanks! 🙂

@Lesum I'm so sorry to ask you for the third time, but I've just seen one little issue - the hover css is perfect now on the About 2 Page Desktop view and on all other black pages both on desktop and mobile view. However on the mobile view of the About 2 Page only the navigation and menu hover color isn't working.  Is there a way to fix this?

Thank you again, I've been researching for solutions for 3 days, but without a result before meet you 🙂

@kkf_magi There are some errors in the code you inserted on the About 2 page, which are preventing the custom CSS from working. If you can send me a screenshot of the code on the About 2 page, I can identify which part of the code needs to be removed for the CSS code I provided to function correctly.

@Lesum Thank you! I really don't understand anything of coding and everything that I've inserted is based on videos online and this forum. But since the sites are different it's very possible to have added wrong things. Here are the exact codes on About 2 Page: I'm not sure about the Burger line since I took it from another post here.

<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>

@Lesum    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 🙂

@Lesum  Hi Lesum, did you have a chance to check the error in the About Page code? Thank you!

@kkf_magi Can you first remove this block of code from your About page code?

div.container.header-menu-nav-item * {
    color: black !important;
}

Then try adding this code in the Advanced section of About page

div.container.header-menu-nav-item .header-menu-nav-item-content {
    color: black !important;
}
div.container.header-menu-nav-item:hover .header-menu-nav-item-content {
    color: #de3163 !important;
}

@LesumThank you so much! It works perfect except one thing - the menu lines on mobile view is not black now.  You can check it:

Update: And also the "Work" menu doesn't have the hover effect on mobile

And just one really final question - on my footer I added solid square frames to my social links that are black (for all black pages). In this About page they are still black. I'm attaching the image. How can I change the color of these black frames only on this About page , both for Desktop and Mobile view? Thank you so so much!

@kkf_magi Awesome! Add this code under Custom CSS to change the color of menu lines on About page:

#collection-665990f3dafef7079b061afa .burger-inner>div {
  	background-color: black !important;
  }

@Lesum One update for the icons - on the mobile view  in About Page the black frames are missing....

@kkf_magi Add this code block under Custom CSS to change the color of the frame of the social icons on About page:

#collection-665990f3dafef7079b061afa footer.sections use.sqs-use--mask {
    fill: yellow !important;
}

And add this code block if you want to change color of the social icons on About page:

#collection-665990f3dafef7079b061afa footer.sections use.sqs-use--icon {
    fill: blue !important;
}

@Lesum You saved my day, thank you so much! Only one thing happens - on mobile menu on the About Page the "Work" folder doesn't have the hover effect. All other pages have except it. How can I fix this?

And how can I change the hover color of the social links only on About page - both in header and footer?

@kkf_magi Add this code under Custom CSS to change the hover color of the social links only on About page

#collection-665990f3dafef7079b061afa footer.sections .sqs-svg-icon--social:hover use.sqs-use--icon {
    fill: yellow !important;
}

@kkf_magi Add this code under Custom CSS to change the hover state color of the "Work" folder on About page mobile version:

#collection-665990f3dafef7079b061afa div.container.header-menu-nav-item:hover .header-menu-nav-item-content span {
    color: #de3163 !important;
}

8 minutes ago, Lesum said:

@kkf_magi Add this code under Custom CSS to change the hover color of the social links only on About page

#collection-665990f3dafef7079b061afa footer.sections .sqs-svg-icon--social:hover use.sqs-use--icon {
    fill: yellow !important;
}

 

@Lesum    Thank you so much! This code works fine in footer, but in header the color isn't changing

@kkf_magi Here's the code for social icon hover color change on About page:

#collection-665990f3dafef7079b061afa .header .icon:hover svg {
    fill: black !important;
}

@Lesum    Thank you so much! 🙏