Changing navigation font colour on blog pages only

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

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');
  }

That's done it! Thank you. Do you know if there's a way to make the font colour an alternative colour to black?

@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;
}

Thanks. I am swapping out the hex colour code but it isn't giving me the right colour! Any ideas why? They are the same hex values used elsewhere on my site.

Is there a version of this code that works on 7.1?

21 hours ago, MarcusAurelius said:

Is there a version of this code that works on 7.1?

 

With blog page, use this code

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

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

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?