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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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...