Header colour

Homepage › Community Forums › Aspire Theme Support › Header colour

Tagged: 

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.