Jump to content

How do I target a:hover navigation links only? The a:hover's that I want for the rest of the site are overriding the navigation site links

Go to solution Solved by MoeTalks,

Recommended Posts

www.moetalks.com

password 2024

Start in css at line 62.

 

I am trying to change the style of the hover links on the site navigation only.  This first part works great.  Just the way I want it on the navigation part on all pages.

// dropdown background & font colors //
.header-nav-folder-item {
background: #0b5394;
/*  opacity: 100%!important; if you want to make it a little less blue*/
a { color: white!important; }
}
// dropdown hover colors //
.header-nav-folder-item:hover {
background: #fac827;
}
/* Nav item hover color */
.header-nav-item a:hover {
    font-weight: bold!important;
  text-decoration:underline!important;
  a { color: white!important; }
}
But as soon as I add the below, it overrides the navigation and uses the below for the entire site, including the navigation.

I tried the #page selector and it works but because I also have markdown blocks that have links in them I would have to create a different code for each markdown block. It works perfectly without the #page selector but it's taking over the navigation.  How do I just target hover navigation links?

// #page .sqs-block-html //

a {color: #0b5394!important;
text-decoration: none!important; 
}

// #page .sqs-block-html //

a:hover  {
     color: #0b5394!important;
  text-decoration: underline!important; 
font-weight:bold
  }
 

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

And once again after spending all day working my regular job and tryig to figure out this code, the minute I send a message to the forum I figure it out.  I needed to target the #page and NOT the sqs-block-html.  It works now perfect.  Site is still open but thanks anyway.

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.