Twenty-Eleven change menu hover color

  • Author
    Posts
  • #669605

    bradaccarino
    Member

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

    bradaccarino.wordpress.com

    Thanks in advance!

    The blog I need help with is bradaccarino.wordpress.com.

    #669743

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

    #669854

    bradaccarino
    Member

    Hi!

    It’s bradaccarino.wordpress.com. For some reason my name is still linked to an old site.

    Thanks again!

    #669856

    bradaccarino
    Member

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

    #669863

    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;
    }
    #669866

    bradaccarino
    Member

    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.

    #669882

    bradaccarino
    Member

    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 */

    #669885

    It seems that you found that, which is here.

    #access ul ul a {
    background: none repeat scroll 0 0 white;
    }
    #669899

    bradaccarino
    Member

    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!

    Thanks

    #669927

    See the other thread, I responded there for you.

    #669929

    bradaccarino
    Member

    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?

    #669938

    You want the menu to cover part of the image?

    #669939

    bradaccarino
    Member

    I was thinking about going for a menu bar style like (http://ringvemedia.com/) but I’m thinking there’s no point in going that complicated.

    #669940

    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.

    #669948

    bradaccarino
    Member

    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.

    #669950

    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…?”

    #669951

    bradaccarino
    Member

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

    #669954

    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.

    #669955

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

    #669956

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

The topic ‘Twenty-Eleven change menu hover color’ is closed to new replies.