Add hover button effect in menu

  • eatechniques

    (@eatechniques)


    10 years, 6 months ago

    I am new to this.
    Where can I add CSS code for my header menu?
    I have installed the Custom CSS plugin, so I guess I can use that?

    I have a theme called Tesseract.
    I already have a header hovered link color effect, but what I want is a hover effect that covers the menu link like a big box that fills the whole link from top to buttom of the header/menu.

    I have tried this code in the Custom CSS plugin to test, but it only sourrounds my link with a tiny box:

    menu {font-size: 12px; background: #00ffff; padding: 1px;}
    menu a{ color: ff0000; background: #fff; }
    menu a:hover { color: #000; background: #00ff00; }

    It also does not overwrite the css color from the settings I already have, which for me is okay – but thought maybe that could be relevent for the support here.

    Any ideas on how to code this better?

Viewing 2 replies - 1 through 2 (of 2 total)
  • sam2sam

    (@sam2sam)

    10 years, 6 months ago

    I have exact problem just yesterday and then realized that there are some settings related to the theme on worpress which overrides the scripts and monogramming.

    For example I tried to change the hover effect color for the images on my home page. for my website I went to Theme Options/ menu settings and then played around with two options called “Hover and Active Font Color” and “Hover and Active Background Color” on the right.

    You may wanna have a look to see how they appear on the website http://sam2.com.au

    Hope it helped

    Moderator bcworkz

    (@bcworkz)

    10 years, 6 months ago

    sam2sam is right – first poke around in the theme customizer, there could be built in support for what you are trying to do.

    I’m unfamiliar with the Custom CSS plugin. I’m sure it works as advertised and it’s very useful for those that don’t want to do any more coding than they have to. If you’re willing to “get your hands dirty”, such a plugin is probably unnecessary.

    If you’re willing, the first thing to do is create a child theme. This is really quite simple. All of your custom CSS and PHP can reside here and you don’t need to be concerned that a theme update will wipe out your changes.

    The other thing to do is get familiar with your browser’s developer tools. It should have a CSS tool that lets you examine relevant rules for any given element, where those rules came from, and the best part, try different values right there without editing any files at all.

    This should be all you need to get your site looking exactly the way you want.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Add hover button effect in menu’ is closed to new replies.