Change Header Color

  • Unknown's avatar
    jimnancybarrett · Member ·

    Hello,
    On my site magisdobes.wordpress.com I’d like to change just the header (where the title and the menu buttons are) to have a background color of dark purple text and the font to be white. I’ve had some luck with the .header function but it doesn’t quite work correctly. Any help would be greatly appreciated!

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    There is not a direct control for setting this color in your theme, but you can add the following CSS to your site customizer (under the CSS tab) to change the header color:

    @media only screen and (min-width: 560px) {
  #masthead {
    width: 100%;
    max-width: 100%;
    padding: 20px 40px;
    background: #55016a ;
  }

  #content {
    padding-top: 110px;
  }

  .site-title a:link,
  .site-title a:visited,
  .site-description,
  .main-navigation a, 
  .main-navigation a:link {
    color: #fff;
  }

  #menu-primary{
    background-color: #55016a;
  }
}

.main-navigation .button {
  background-color: #55016a;
}

.main-navigation .button:hover {
  background-color: #300050;
}

    Please note that this will apply only to desktop and tablets. Due to the way the menu changes on phones (to a button) the header background color cannot be easily changed.

    Hope that helps. Please let us know if you have any more questions.

  • Unknown's avatar
    jimnancybarrett · Member ·

    Thanks so much, this worked absolutely perfectly! I just have a small problem that for some reason the links on my navigation bar now won’t change from black to white. Do you have any ideas for a code that could fix this?

  • The topic ‘Change Header Color’ is closed to new replies.