Need help? Check out our Support site, then


highlight menu/submenu hover state

  1. Hi, I am hoping to change my menu on my blog http://musicampto.wordpress.com/. Rather than hover menu- and submenu-items turning grey, I would like them to do an inverse, i.e. to be highlighted white with black text, like this blog http://elainemnelson.com/.

    Also if possible, I would appreciate my submenu text to not be wrapped as it does under the "weekly themes" menu.

    I'm using chalkboard theme.

    Thanks

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

  2. Here is an example to get you started with changing menu background colors:

    .main-navigation div > ul > li:hover > a {
    	background: #fff;
    	color: #000;
    }

    It just affects the first level. To change it to affect the submenus too, remove the ">" symbols from the CSS selector.

    To change the width of the links in the drop-down submenu, add this to your Appearance > Customize > CSS editor:

    .main-navigation ul ul a {
    	width: 214px;
    }
  3. Thanks!

    I played with it and figured out what I like best.

    But, can you now tell me how to centre the drop down menus under the main menu? And is there anyway to make the line/border of the drop down menu box less thick (very thin preferably) and more of a grey colour?

    Thanks again!

  4. Also, I didn't like the effect of the black on white because the white seemed kind of grey in comparison to the bright white border line and the bright menu titles. This was not the case in the example blog i cited.

    So, I thought I would try making the font bigger instead. I like this effect better BUT would prefer that the space between the menu items be consistent so that when you hover over the menu item and it gets a little bigger it doesn't displace any of the other menu items. Is there anyway I can fix this?

    Thanks again.

  5. Let's take all of these questions one at a time.

    can you now tell me how to centre the drop down menus under the main menu?

    I think that you mean you want the submenu container (that whole block) centered under the top-level menu item. To use a specific example, the box that appears when you hover over "Weekly Themes" would be moved left a little bit from where it appears now on hover.

    Those submenu drop-down boxes are set in place using what is called absolute positioning relative to the parent element (the top-level menu items in this case). Because each of the top-level items is a different width and because they are positioned absolutely, you can't use one rule to center the boxes relative to its parent. You could try moving each submenu over to the left by the same amount to see if the result looks good to you. Here is an example:

    .main-navigation ul ul {
    	left: -50px;
    }

    If you wanted to, you could get a lot more specific and set a fixed left value differently for each top-level menu item. But the problem with doing that is that if you changed menu labels and the width of the dropdown box or if any of the main menu items were adjusted through the dashboard, the CSS would also have to be adjusted accordingly. This could cause problems down the road if someone else tries to update any of the menu items.

  6. Thanks so much again! You totally got what I was asking...

    Now that I know this is a bit of a complex request, can you tell me if it is possible to at least centre the submenu items within the submenu drop-down box?

    I know you said one question at a time, but this is the second question I have - can i make the border of the drop down submenu thinner and darker, a grey for instance?

  7. can you tell me if it is possible to at least centre the submenu items within the submenu drop-down box?

    Thats much easier! Try this:

    .main-navigation ul ul a {
    	text-align: center;
    }

    I know you said one question at a time

    I try to get to requests quickly when I can, but I can't always! :) I'm juggling a few different tasks today.

    can i make the border of the drop down submenu thinner and darker, a grey for instance?

    Here's a snippet for adjusting the color of the submenu border in the Chalkboard theme:

    .main-navigation ul ul {
        border: 5px solid #777;
    }

    Here's how I figured it out using the web inspector that is built in to Firefox:

    https://cloudup.com/cmwn9V_9ajo

  8. And is there anyway to make the line/border of the drop down menu box less thick (very thin preferably) and more of a grey colour?

    Ah, I just saw the "very thin" part of this request. To update that, look at the example in my last reply and change the 5px to 2px or whatever you think looks best.

  9. Thanks so much! so quick and thorough. Very grateful!

  10. Also, I didn't like the effect of the black on white because the white seemed kind of grey in comparison to the bright white border line and the bright menu titles.

    I agree, I like the way it looks now!

    So, I thought I would try making the font bigger instead. I like this effect better BUT would prefer that the space between the menu items be consistent so that when you hover over the menu item and it gets a little bigger it doesn't displace any of the other menu items. Is there anyway I can fix this?

    I see what you mean. I think the best way to fix that would be to increase the text before the hover too.

    To do that, find this in your custom CSS:

    .main-navigation div ul > li:hover > a {
    	font-size: 105%;
    }

    And update it to this:

    #page .main-navigation a,
    .main-navigation div ul > li:hover > a {
    	font-size: 105%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic