Change header colour

  • nylarosie

    (@nylarosie)


    6 months ago

    Hi, thank you for producing this theme. I have the free version of the theme and I’d like to change the header colour. I’ve managed to change most of it using CSS but not the menu container as I can’t find the name of that item.

    I would also like to know how to change the site name/menu colour in the header.

    Also, how do I stop the ‘books’ menu item being permanently highlighted in yellow? I guess it is highlighted because it links back to the home page.

    Thank you for any help!

    • This topic was modified 6 months ago by nylarosie.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Theme Author wpkoithemes

    (@wpkoithemes)

    Hi nylarosie,

    You can change all these colors in the customizer with the premium version.

    You can also use these CSS codes.
    Menu background:
    .main-navigation, .main-navigation ul ul {background-color: #fff;}

    Menu color:
    .main-navigation .main-nav ul li a, .menu-toggle {color: #585598;}

    Site title:
    .main-title a, .main-title a:hover, .main-title a:visited {color: #585598;}

    Current menu item:
    .main-navigation .main-nav ul li[class=”current-menu-“]>a:hover, .main-navigation .main-nav ul li[class=”current-menu-“].sfHover>a {color: #ffe17f;}

    I hope it helps.

    Thread Starter nylarosie

    (@nylarosie)

    Hi, I can change the background color for the menu but please could you explain how to get the current menu item to change as this does not work if I change the color?

    Current menu item:
    .main-navigation .main-nav ul li[class=”current-menu-“]>a:hover, .main-navigation .main-nav ul li[class=”current-menu-“].sfHover>a {color: #ffe17f;}

    Theme Author wpkoithemes

    (@wpkoithemes)

    Hi nylarosie,

    Please try this code:
    .main-navigation .main-nav ul li[class*=”current-menu-“]>a { color: #ffffff !important;}

    Thread Starter nylarosie

    (@nylarosie)

    Thank you, I tried the code but it did not have any effect.

    Thread Starter nylarosie

    (@nylarosie)

    @wpkoithemes please do you have any other suggestions?

    Theme Author wpkoithemes

    (@wpkoithemes)

    Hi nylarosie,

    Please try this code:
    .main-navigation .main-nav ul li.current-menu-parent a { color: #585598 !important;}

    It will change the submenu color also. To change the submenu color, add this:
    .main-navigation .main-nav ul li.current-menu-parent ul a { color: #fff !important;}

    I hope it helps.

    Thread Starter nylarosie

    (@nylarosie)

    Hi, Two codes together change the submenu colour to white. Without the top code but with the bottom one the submenu stays yellow.

    The main menu does not change color at all.

    Theme Author wpkoithemes

    (@wpkoithemes)

    In this case, please try to replace the top code with this:
    .main-navigation .main-nav ul li.current-menu-item a { color: #585598 !important;}

    The bottom code with this:
    .main-navigation .main-nav ul li.current-menu-item ul a { color: #fff !important;}

    Thread Starter nylarosie

    (@nylarosie)

    Actually this did work partly

    .main-navigation .main-nav ul li.current-menu-parent a { color: #585598 !important;}
    .main-navigation .main-nav ul li.current-menu-parent ul a { color: #fff !important;}

    The menu changed from yellow to purple on home page only but when I change pages, the current menu item is still in yellow and hovering over an item is still yellow.

    The chils menu item does change color to white – so that bit is fine.

    Thread Starter nylarosie

    (@nylarosie)

    Is there a way to change the secondary menu color and hover color to a different co,or – not yellow?

    Thank you for your continued help!

    Thread Starter nylarosie

    (@nylarosie)

    OK, since I cannot change the yellow hover color and current menu item color to a different color, I decided to make the header a dark color so that the yellow shows up.

    I now need to find out how to change the color of the site title to white and themain menu items to white.

    Can you suggest a solution? Thank you!

    Theme Author wpkoithemes

    (@wpkoithemes)

    Hi,

    You can use this code for the site title with Your own color code:
    .main-title a,?.main-title a:hover,?.main-title a:visited?{color: #fff;}

    The code for the menu items sent earlier.

    I hope it helps.

    Viewing 12 replies - 1 through 12 (of 12 total)
    • You must be logged in to reply to this topic.