WordPress.org

Ready to get started?Download WordPress

Forums

Babylog
[resolved] How to remove the hover in menu (15 posts)

  1. callmeveev
    Member
    Posted 1 year ago #

    Hi
    Could not get rid of the white hover in the menu.
    I tried every possible thing in the css. It just stays.
    Thanks for your advice.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Can you post a link to your site?

  3. callmeveev
    Member
    Posted 1 year ago #

    The site is still being built so pardon me if it's messy.
    http://ant-workshops.co.il/main/

    Also, when I change the top margin value to any other number in px (see below) the menu stops working (links don't show as links any more). How weird is that.

    .main-navigation {
    	margin: 20px 20px 20px 20px;
    }
  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This appears to be the CSS code that is setting the hover background color to white:

    .theme-color-green .cat-links a:hover, .theme-color-green .comments-link a:hover, .theme-color-green .main-navigation ul ul li, .theme-color-green .main-navigation ul li.hover, .theme-color-green .main-navigation ul li:hover {
        background-color: #FFFFFF;
    }

    Right now, the links seem to be working, but they are covered up partway by the content section. Is that what you are trying to address with changing the margins?

  5. callmeveev
    Member
    Posted 1 year ago #

    I "pushed" the content +sidebar sections lower and also the menu, via the margin value.
    It totally screwed up the functionality of the menu. As if after some height the menu stops working. Could it be because it's within the header section?

  6. callmeveev
    Member
    Posted 1 year ago #

    I changed the code you mentioned to transparent and to #000 and nothing happened.
    I tried *everything*!

  7. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    You're in advanced CSS customization territory, so I'm not sure how much I can help, but you might try using a clear fix on the #masthead to see if that allows the menu to appear. Or try setting the same amount of padding instead of a margin.

    Beyond that, I would revert any changes to the header that are causing the problem and play around with it in Firebug until you get it to look the way you want.

  8. callmeveev
    Member
    Posted 1 year ago #

    Thanks Caroline!
    I have been playing in firebug forever.
    Unfortunately the changes just don't appear properly in other browsers, and all the margin/padding plays turn into menu running far out the main div.
    I did revert the changes on the menu to the original CSS.

    Plus, the white hover on the menu just can't be changed, which so weird and frustrating.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The hover color seems to be coming from several places in various stylesheets so that's probably making it hard to track down and/or override. Try adding this to your child stylesheet:

    .main-navigation li:hover > a {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
    }
    .main-navigation ul ul *:hover > a {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
    }
    .main-navigation ul ul a:hover {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
    }

    Change the color to what your want - changing to hex is probably easier/better. And if it does not work, try adding the !important to each one.

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Also, if you are having browser inconsistencies, a good troubleshooting step is always to validate for coding errors:

    http://codex.wordpress.org/Validating_a_Website

  11. callmeveev
    Member
    Posted 1 year ago #

    Gosh, thanks so much.
    Your code with !important worked like a charm.
    And thanks for the important tip about validating the code. I'll start using that from now on.

    You don't have a solution to the other menu issue, by chance?

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Glad that worked - CSS can get tricky when you have lots of stylesheets and then the !important can be helpful (though, in general, it's best to use it as minimally as possible).

    Where do you want the menu to be / look? Obviously, right now it's not okay, but where do you want it to move to?

  13. callmeveev
    Member
    Posted 1 year ago #

    I wanted it attached to the left bottom of the header, but couldn't get it work in all browsers. So I gave up and tried to place it in a gap I created between the header and content.
    I created the gap via top margins of the content, and the menu. BUT- If I move the top margins of the menu (see code I mentioned above), the menu stops function and the links don't show as links any more. So weird and could not solve that.
    The theme is great but gives me so many complications :(

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Seems like you got it sorted? It looks to be working (at least in Firefox)?

  15. callmeveev
    Member
    Posted 1 year ago #

    I just did!
    After so many hours of tries.
    Thanks you all for the help and support. This community is a great help.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags