Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Change header background color, specifically on blog posts


GrahamGraphite

Question

Hello. On my site, I have my header navigation background set to transparent on all of my pages, I have a blue background behind my headers so the navigation logo and nav items just overlay the blue background. For example, see here https://www.graphitefinancial.com/blog  or https://www.graphitefinancial.com/

However, for my blog posts I cannot add a blue background behind the header with the theme I'm using. See here: https://www.graphitefinancial.com/blog/title-growth-at-all-cost-strategies-arent-working-for-startups-heres-what-is-and-always-has.

 

So my logo doesn't show since it is white.

Is there a way for me to set just the blog posts to have a specific background. I DO NOT WANT TO CHANGE THE HEADER NAV BACKGROUND COLOR ON ANY OTHER PAGE BUT A BLOG POST.

Thanks :) 

Link to post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS .collection-type-blog.view-item header.Header.Header--bottom { background: blue; }  

is used: .header-menu-bg { background-color: #01013a; background: linear-gradient(to bottom, #01013a, #01013a); }

14 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

.collection-type-blog.view-item header.Header.Header--bottom {
    background: blue;
}

 

Link to post
  • 0
20 minutes ago, LuckyDave said:

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

SS 7.1 blog use different class, not 

.collection-type-blog

Can you share link to blog post on your site?

Link to post
  • 0
On 12/19/2019 at 6:58 PM, LuckyDave said:

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

Use

.collection-type-blog-basic.view-item

 

Link to post
  • 0
11 hours ago, tuanphan said:

Use


.collection-type-blog-basic.view-item

 

.collection-type-blog-basic.view-item header.Header.Header--bottom {
    background: blue;
}

Is that correct? it doesn't seem to work for me. Sorry to bother you with this and thank you for your help

Link to post
  • 0
15 hours ago, LuckyDave said:

.collection-type-blog-basic.view-item header.Header.Header--bottom {
    background: blue;
}

Is that correct? it doesn't seem to work for me. Sorry to bother you with this and thank you for your help

.collection-type-blog-basic.view-item header#header {
    background: blue;
}

 

Link to post
  • 0
15 minutes ago, LuckyDave said:

Thanks @tuanphan but Its not working for me. Is there any settings i need to adjust perhaps?

Actually - if i make the header solid as default - then perhaps i man then make transparent on certain pages?

Is there a way of targeting nav on home page and making it transparent?

Link to post
  • 0
13 minutes ago, LuckyDave said:

Thanks @tuanphan but Its not working for me. Is there any settings i need to adjust perhaps?

Try this

.collection-type-blog-basic-grid.view-item .header-announcement-bar-wrapper {
    background: red !important;
}

 

Link to post
  • 0
18 hours ago, sun_ said:

I'm trying to do the same thing on my main page for the header text over the banner. The above code didn't work. 

Create a question with link to your site.

Link to post
  • 0
On 12/19/2019 at 4:20 AM, tuanphan said:

SS 7.1 blog use different class, not 


.collection-type-blog

Can you share link to blog post on your site?

Perfect! Just ran into this issue. Thank you.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...