• Resolved dantwack

    (@dantwack)


    Hello,

    how can i change the Color of the Header.

    I want to change the Menu background from white to black and the text from black to white.

    I only find the CSS code for the Page but not for the Header.

    THX

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Andrew Misplon

    (@misplon)

    Hi @dantwack

    Thanks for your support.

    Please remember to not make changes via Appearance > Editor. All WordPress themes completely overwrite their own folders during theme update. Use a plugin like Simple Custom CSS: https://www.ads-software.com/plugins/simple-custom-css/ or Jetpack Custom CSS (if you already use Jetpack) to add your custom CSS snippets.

    I need to step out for a couple of hours. I’ll send the necessary Custom CSS ASAP this afternoon (GMT+2). Changing the header background is quick. I just need to spend a little time grabbing the CSS selectors for the menu.

    (If you’re interested, Ultra Premium adds a complete set of controls to Appearance > Customize. You can check out that offering from Appearance > Ultra Premium.)

    Theme Author Andrew Misplon

    (@misplon)

    Thanks for the wait ??

    With Simple Custom CSS installed, go to Appearance > Custom CSS and insert the following to change the header, main menu and responsive menu colors:

    /* Header */
    
    .site-header {
    	background: #fff;
    }
    
    /* Main Navigation */
    
    .main-navigation ul li:hover > a {
      color: #0896fe;
    }
    
    .main-navigation ul ul {
      border-top: 3px solid #0896fe;
    }
    
    .main-navigation ul ul li:hover > a {
      background: #0896fe;
    }
    
    .main-navigation ul ul .current_page_item > a,
    .main-navigation ul ul .current-menu-item > a,
    .main-navigation ul ul .current_page_ancestor > a {
      color: #0896fe;
    }
    
    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
      color: #0896fe;
    }
    
    .main-navigation div > ul > li > a:hover {
      border-bottom: 3px solid #0896fe;
    }
    
    .main-navigation .menu-search .search-icon:hover:before {
      color: #0896fe;
    }
    
    .main-navigation .menu-search .searchform input[name=s] {
      border-top: 3px solid #0896fe;
    }
    
    /* Responsive Navigation */
    
    .responsive-menu .main-navigation.toggled ul li a:hover {
      background: #0896fe;
    }
    
    .responsive-menu .main-navigation.toggled ul ul li a:hover {
      background: #0896fe;
    }

    Hope that helps.

    Theme Author Andrew Misplon

    (@misplon)

    Hi @dantwack

    How are you looking on the above? All sorted?

    Thanks ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Color’ is closed to new replies.