Primary color and hover color

  • Resolved blomstrande

    (@blomstrande)


    9 years, 1 month ago

    So, I’m creating a site with a white background and therefor I set the primary color in basic styling to white. This is because I don’t want for example the icons on my home page to get a circle around them when hovering and the same goes for the dropdown menu items in my navigation menu.

    However – this is causing a lot of problem. Right now, as the primary color in basic styling is set to white, some other features on my site also seem to be affected by this. For example, on my single post page, the categories in my sidebar turn white on hover (making them impossible to read on the white background). Also, the button “previous post” and “next post” also turn white on hover. This is quite frustrating.

    I don’t know if it’s the easiest way but right now I’m trying to change all these settings with custom css but for that I need help.

    I want to change:
    – sidebar categories hover color to black on single post page
    – change “previous post” and “next post” hover color to gray
    – want to change the color of the search box in my primary sidebar to black

    Link to my site: https://www.blomstrande.com

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter blomstrande

    (@blomstrande)

    When so many areas of my site were affected by the primary color I realized it was just easier to set it to black and instead change the areas that I want to change to white…

    So, the problems that I need to have solved are the following:
    – change icon hover color to white on front page
    – change hover color on dropdown primary navigation menu to white
    – change top bar hover color to white

    All help much appreciated.

    Hey,
    You can use this css for all three:

    #topbar .topbarsociallinks li a:hover, #topbar ul.sf-menu li a:hover, .kad-primary-nav ul.sf-menu ul li a:hover, .kad-primary-nav ul.sf-dropdown-menu li a:hover span {
    color: white !important;
}

.home-iconmenu .home-icon-item i {
    background: transparent !important;
}

    Kadence Themes

    Thread Starter blomstrande

    (@blomstrande)

    Thanks, that solved the icon-background.

    I imagined something different for the top bar och primary navigation menu though. The code you gave me changed the font color on hover, I however wanted it remove the black block instead. For the primary navigation menu I’d instead want the font to be styled italic on hover, and for the top bar menu I’d like the block displayed around the menu item on hover to be white instead of black.

    hannah

    (@hannahritner)

    Hey blomstrande,
    This should do what you want for the topbar menu:

    #topbar ul.sf-menu > li > a:hover {
    background: #fff;
    color: #000 !important;
}

    And this should work to make your primary menu italic on hover:

    ul.sf-menu a, .none-trans-header .kad-primary-nav ul.sf-menu a:hover {
    font-style: italic;
}

    Hope that helps!

    Hannah

    Thread Starter blomstrande

    (@blomstrande)

    Thank you Hannah!

    Now the topbar is exactly as I want it, a problem still remains with the navigation menu though. When hovering on the items in the dropdown menu the black block still appears and I’d like it removed.

    hannah

    (@hannahritner)

    Sorry about that, try also adding this:

    .none-trans-header .kad-primary-nav ul.sf-menu ul li a:hover {
    background: transparent !important;
}

    Hannah

    Thread Starter blomstrande

    (@blomstrande)

    Thank you so much Hannah, it works perfectly!

    Problem solved and cased closed. Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Primary color and hover color’ is closed to new replies.