• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Header colour

Home › Community Forums › Aspire Theme Support › Header colour

Tagged: header colour responsive

  • This topic has 6 replies, 3 voices, and was last updated 3 years, 5 months ago by dateri.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 16, 2019 at 10:57 am #23083
    emmarokseth
    Customer

    Hi Wes,

    I have tried to change the background colour on the header from black to a dark blue (aspire theme). But on mobile phones the header is still black once I start scrolling.

    I have tried adding different CSS codes that I have found on this forum and elsewhere, but I haven’t been able to find the right one..

    Is this something you could help me with?

    Don’t know it this is helpfull, but this is the code that I have added.

    .site-header {
    background-color: #133046;
    border-bottom: 1px solid #ddd;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    }
    .site-header.light {
    background-color: #133046;
    padding-top: 20;
    }

    March 17, 2019 at 2:04 pm #23085
    Wes
    Moderator

    Can you post a link to your site? I can see exactly where it’s coming from.

    BTW, you can post it Privately if you don’t want your link visible on a public forum.

    March 18, 2019 at 7:11 am #23086
    emmarokseth
    Customer
    This reply has been marked as private.
    March 19, 2019 at 1:52 pm #23089
    Wes
    Moderator

    Take a look at line 2549 in your style.css and replace the black with your blue –

    	.front-page .site-header {
    		background-color: #133046;
    	}
    

    Let me know if that fixes it.

    March 21, 2019 at 6:57 am #23092
    emmarokseth
    Customer
    This reply has been marked as private.
    March 22, 2019 at 2:40 am #23096
    Wes
    Moderator

    It looks like you added that line in your custom CSS area? If so, then that’s probably why that’s happening. Since it’s not added inside a media query it’s applying the background color to the whole site rather than the mobile section (that’s where the issue is).

    I was referring to replacing the code on line 2549 in your style.css file which currently looks like this –

    	.front-page .site-header {
    		background-color: #000;
    	}

    However, if you prefer to make adjustments in your Custom CSS area rather than editing the style.css you can do so by adding this to your custom CSS –

    @media only screen and (max-width: 1023px) {
    
    	
    	.front-page .site-header {
        	    background-color: #3d586b;
    	}
    
    }

    I just tested and was able to get this working on my end. Let me know if it works for you. If not, I can log in and do it for you if you want. Just let me know

    August 18, 2019 at 6:14 pm #23340
    dateri
    Customer

    HIya,

    I like this edit, but I’m wondering if you can change the colour, but also make it so the header is transparent until you start to scroll as with the default version?

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework