Jump to content

Style links except in header and footer

Go to solution Solved by Caroline_Smith,

Recommended Posts

I am applying a css style to my links however I do not want the style applied to links in the header nav or in the footer. My code here works to exclude the header nav but does not work to exclude the footer. 

/* current general css for links */
p a:hover {
  font-style: italic;
  color:#990000!important; 
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #990000 !important;
}

/* what I'm trying to add */
p:not(.header-nav-list):not(#footer) a {
  text-decoration: none !important;
  color: #000 !important;
  font-weight: 600;
  box-shadow: inset 0 -12px 0 rgba(142, 169, 139, .35);
  color: inherit;
  transition: all 1.2s ease-in-out;
}

p:not(.header-nav-list):not(#footer) a:hover  {
  background: rgba(142, 169, 139, .35);
  box-shadow: none;
}

I have also tried to replace "#footer" with the section id of the footer. 

Thanks in advance!

 

Link to comment
  • Solution

You could try using the "#page" selector instead. This will cover all links in the main content area, i.e. not the header and footer links.

 

#page a:hover {
  font-style: italic;
  color:#990000!important; 
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #990000 !important;
}

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

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.