Menu transparency change Theme «Eight»

  • Unknown's avatar
    mardeseta · Member ·

    Hi,

    I’ve bought «Eight» theme for my web site, but I’m having problem with the menu background color. The site has a transparent menu. Since the background is an handwritten letter it is really difficult to read the different sections of the menu. How can i change the feature in the CSS of the theme to have a white background for the menu?

    Here’s the site: https://malebrancheproject.wordpress.com/

    Thank you for your time

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

  • kathrynwp · Staff ·

    You should be able to remove the transparency on the menu background by adding something like this to your custom CSS editor:

    #access li:hover > a, #access ul ul *:hover > a, #access .current_page_item a {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
}

    Let me know if that does the trick, and do feel free to post addition questions in Eight’s very own theme forum:
    https://theme-support.wordpress.com/forum/automattic/eight/

  • Unknown's avatar
    mardeseta · Member ·

    Thanks for your answer. I wrote the instruction you’ve suggested and the it changes the color of the menu. What doesn’t change (and what I’d like to modify) is the fact that the only way to actually see the menu is to pass your cursor on it. I’d like it to be always visible. I’m sorry my question wasn’t so clear I think :)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’m seeing only one menu item at the moment, Home. Did you remove the other menu items?

    If you have submenu items on the top navigation, it might not work well to have them showing all the time as they would overlay the items below (content).

    Have you considered not using the top menu and instead putting a Custom Menu Widget in your sidebar, perhaps right at the top? Here are some links for you on Custom Menus and Menu widgets

    Custom Menu
    Custom Menu Widget

    The existing top level menu can be hidden with the following CSS. 

    #access {
    display: none;
}
#primary {
    margin-top: 25px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, and sorry I misunderstood. The #access a div does not have a background color assigned to it, and with the nature of your background, the text for the two additional menu items gets lost. If you add the following CSS, along with the CSS @kathrynwp gave above, all the menu items will show. 

    #access a {
    background: rgba(255, 255, 255, 1);
}

    With the above only, the current page item shows as translucent, and when you hover one of the others it will turn from white to translucent. If you wish to change all that behavior around (different color on hover, or different color for the current page item), just let us know and we can help with that.

  • Unknown's avatar
    mardeseta · Member ·

    Hi, thanks, your suggestion did the trick. As you said, the background of the menu is now white, but it turns translucent. What I’d like to have is a translucent menu all along. Do you have any idea how can I do this?

    Thanks!

    M.

  • kathrynwp · Staff ·

    You could try changing the 1 in the code thesacredpath gave you – which means 100% opaque – to something lower, like .6:

    #access a {
    background: rgba(255, 255, 255, .6);
}
  • Unknown's avatar
    mardeseta · Member ·

    Perfect! Thanks ;)

  • kathrynwp · Staff ·

    You’re welcome!

  • The topic ‘Menu transparency change Theme «Eight»’ is closed to new replies.