Need help? Check out our Support site, then

Twenty-Eleven change menu hover color

  1. How do you change the color of a menu item when you hover over the item?

    Thanks in advance!

    The blog I need help with is

  2. We need a link to the site you are talking about. The one linked to your username has been deleted.

  3. Hi!

    It's For some reason my name is still linked to an old site.

    Thanks again!

  4. Oh and I'm looking to change color background not the text.

  5. The background is actually a linear gradient (subtle, but still a gradient). The problem is with editing a gradient at .COM is that I cannot currently get it to hold the gradient, it aways strips everything out. The below is the gradient. The first hex color is the top color and the second is the bottom color.

    #access {
        background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;

    You can also do the below and go to a solid color. The hex color I entered is just a placeholder

    #access {
        background: none repeat scroll 0 0 #CC0000;
  6. I just wanted to clear the color and make it white so that works awesome! I've made a couple more changes. Now i've edited it so when you put your cursor on a menu item it turns blue but I'd like the dropdown menu items that do not have a cursor over them to be white. They seem to be an off-white and I can't get it to jive with the blue. It's only the drop-down that's an off-white, the top bar of the menu seems to be correct.

    I'm getting thrown off by the different "ul ul" and "ul li" and "list:hover a" etc. I'm still learning this and can't figure out exactly what represents each part of the menu.

  7. Actually I just figured out! For those that may be having the same problem I've pasted the code below!

    #access li:hover > a,#access ul ul :hover > a,#access a:focus {
    background:#1983d1; /* changes bg color of drop-down menus that have the mouse over them */
    color:white; /* changes text color when moused over */

    #access ul ul a {
    background: white; /* changes bg color of drop-down menus that do not have mouse over them */

  8. It seems that you found that, which is here.

    #access ul ul a {
    background: none repeat scroll 0 0 white;
  9. Another CSS questions...

    It looks like there is a border-style or box-shadow on my search form. I'm not using the widget, this is the search form in the header. I can't find any reference to any style or shadow besides what is in the widget and I've even tried changing that code. Any help removing that look would be awesome!


  10. See the other thread, I responded there for you.

  11. For the menu:

    I tried moving it up over my header image and would like to have a solid background color (white will do) to make the text legible. I have the background set to white as you suggested above but for some reason when moving the menu over the header image it doesn't show the background to the menu. How can I correct this?

  12. You want the menu to cover part of the image?

  13. I was thinking about going for a menu bar style like ( but I'm thinking there's no point in going that complicated.

  14. That site will not completely load for me it appears. What you have to do is set a parent element of the menu to position relative. Then you use position absolute on the menu selector and then use left, top, bottom or right declarations to move the menu element to where you want it. Since the parent has a "position" declared, the position absolute in #access will position in relation to that parent element instead of the browser window.

    #page {
    position: relative;
    #access {
    bottom: 40px;
    position: absolute;

    You can adjust the "bottom" value as you desire.

  15. As always your help is much appreciated. i've got another one for you. I'm looking to move around the order of the elements on my home page (i.e. move featured post above the text that is in uppercase). I'm looking at the section.featured-post{ but can't figure how to move it around.

  16. Are you talking about moving the featured post up above the block of text that starts, "For a country that has been playing catch-up every since...?"

  17. Yes that's exactly what I'm looking to do. Sorry it wasn't clear enough.

  18. Hmmm, I just did some playing with that, and it appears to be a messy thing to accomplish. Everything I did cause some other page element to go rogue.

  19. What about making the font-size smaller on that intro? That would make it less prominent and shorten it up.

  20. I also noticed that your top search box is in the buried in that intro text.

  21. That's a good idea about the font-size. I noticed the search box is buried I just didn't want to mess with it yet until I figured on a layout so I don't have to keep moving it around. As you can tell I've been testing several different options for the layout...and you've been a MAJOR help so thank you sooo much!!

  22. You are very welcome. When I tested, reducing the font-size from 16px to 14 made quite a difference.

Topic Closed

This topic has been closed to new replies.

About this Topic