Title: Add hover button effect in menu
Last modified: August 30, 2016

---

# Add hover button effect in menu

 *  [eatechniques](https://wordpress.org/support/users/eatechniques/)
 * (@eatechniques)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/add-hover-button-effect-in-menu/)
 * 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](https://wordpress.org/support/users/sam2sam/)
 * (@sam2sam)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/add-hover-button-effect-in-menu/#post-6600059)
 * 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](http://sam2.com.au)
 * Hope it helped
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/add-hover-button-effect-in-menu/#post-6600070)
 * 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](http://codex.wordpress.org/Child_Themes).
   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.

## Tags

 * [box](https://wordpress.org/support/topic-tag/box/)
 * [button](https://wordpress.org/support/topic-tag/button/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [hover](https://wordpress.org/support/topic-tag/hover/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 2 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/add-hover-button-effect-in-menu/#post-6600070)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics