DePo Masthead 'block colour' hover on Menu bar – how to remove?

  • Unknown's avatar
    tglyde · Member ·

    Hi all
    I really need to change the way the menu items have a block of colour over them when you’re on that particular page. I have tried every possible permutation of colour and it all stands out a mile and looks really clunky.

    I have the Custom Design upgrade – does any lovely person here know how to fix the CSS for this?

    Thank you kindly!

    T

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

  • Unknown's avatar
    timethief · Member ·

    Hi there,
    This thread will be moved to the CSS editing forum for you where you can get the help you need. Please do not create a duplicate thread.

  • Unknown's avatar
    designsimply · Member ·

    Here is and example that will turn the menu link hover color as well as the current menu color to red.

    #menu ul li a:hover,
#menu ul li a:active,
#menu ul li.current-menu-item > a,
#menu ul li.current-menu-ancestor > a,
#menu ul li.current_page_item > a,
#menu ul li.current_page_ancestor > a {
	background-color: inherit;
	color: #f00 !important;
}

    Adjust the #f00 color value as needed.

  • Unknown's avatar
    thesacredpath · Member ·

    You might try a light grey. The following will change the current page background and also the menu hover color to a light grey. The second CSS rule I’ve included is the color of the text on hover, which is currently white, and doesn’t work too well with the light grey, or any lighter color for that matter. You can adjust both color codes as you desire.

    #menu ul li a:hover, #menu ul li a:active, #menu ul li.current-menu-item > a, #menu ul li.current-menu-ancestor > a, #menu ul li.current_page_item > a {
background-color: #CCCCCC;
}

#menu ul li:hover a:hover, #menu ul li:hover a:active, #menu ul li.current-menu-item:hover > a, #menu ul li.current-menu-ancestor:hover > a, #menu ul li.current_page_item:hover > a, #menu ul li.current_page_ancestor:hover > a {
color: #333333;
}

    Add the above code at Appearance > Custom Design > CSS and see what you think.

  • Unknown's avatar
    thesacredpath · Member ·

    Whoops! I should have refreshed.

  • Unknown's avatar
    designsimply · Member ·

    No worries :)

  • Unknown's avatar
    tglyde · Member ·

    Hi
    I just want to say thanks very much – it’s my bed time and I won’t be at my computer for a few days and will look at this next week.

    I would like to keep the backgrounds on the site white. I just want to get the menu titles not to have that block of colour on them. They don’t even have to change colour at all – in fact that would be better.

    I’d also love to change it so that the main title doesn’t change colour either on subsequent pages.

    I will be back soon to look at it all in more detail.

    Thanks very much! :)

    T

  • Unknown's avatar
    designsimply · Member ·

    Set the “background-color” property value to “inherit” to get rid of it, just as is shown in the first example from earlier.

    To change every variation of the site title in the DePo Masthead theme to a different color, add this CSS:

    .home #page .sitename,
#container h1 a,
#container h1 a:link,
#container h1 a:visited,
#page a:hover,
#page a:link:hover,
#page a:visited:hover {
	color: #00f;
}

    And adjust the #00f value to a color code of your choice:
    http://0to255.com/

  • The topic ‘DePo Masthead 'block colour' hover on Menu bar – how to remove?’ is closed to new replies.