Jump to content

Changing navigation font colour on blog pages only

Recommended Posts

I have successfully removed the banner image from blog posts in the Bedford template. However, I can't figure out how to change the colour of the links in the top navigation along with the drop down menu background and the border around the Contact link. Help please?

I've put the banner image back on for now while I try to work it out.

My site is: www.cheerupmarketing.com

Link to comment

Try this... it works on my demo site:

/* invert logo on blog post pages */
.collection-type-blog #logoImage {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
/* invert nav on blog post pages */
.collection-type-blog #mainNavigation {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }

 

Edited by christyprice

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

@kellycheerup  glad it worked for you! Also, if you could like my posts (the heart button in the lower right), it shows that I was helpful. 🙂

I can get you started on the font color... this should change the color for the links and the folder... maybe someone else can jump in with the button code.
 

/* change nav color on blog post pages */
.collection-type-blog #headerNav a {
color: #990000 !important;  }

 #mainNavigation .folder-toggle {
color: #990000 !important;
}

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 2 years later...
  • 7 months later...

I've used the code below on version 7.1 and it worked great for the top nav, but now I need to add code to change the font colour of the drop down menu on the blog page. Can you help?

body[class*="collection-type-blog"] header#header a {
	color: blue !important;
}
Link to comment
9 hours ago, z03 said:

I've used the code below on version 7.1 and it worked great for the top nav, but now I need to add code to change the font colour of the drop down menu on the blog page. Can you help?

body[class*="collection-type-blog"] header#header a {
	color: blue !important;
}

Dropdown item or dropdown background? Blog list page or individual posts?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.