highlighting menu idea

Hi Sven,

A borders add-on is in the works :)

To do this for now, try this:

.main-navigation {
    border-bottom: 5px solid #222222;
}

Just adjust the color to match your site.

Hi Tom,

border add-on... great to hear that! :-)

Is it possible to have the menu border only shown by hovering the menu? How do I have to change the css-code you posted above?

Regards, Sven

.main-navigation:hover {
border-bottom: 5px solid #222222;
}

Got it... sorry for asking too fast!

Sven

with this code there's a line of 5px added when hovering the menu, that wasn't there before and also hides again when one leaves the menu... so that way anything below the menu kind of "drops/jumps"...

If you haven't already taken care or thought about that, you should with the add-on... perhaps by adding a line of n px with the same colors as the menu and only change that line when hovering!? But you're the master of development!

Kind regards, Sven

To get rid of the jump you could do this:

.main-navigation {
    border-bottom: 5px solid transparent;
}
.main-navigation:hover {
    border-bottom: 5px solid #222222;
}

Hi Sven/Tom - I have added this to my css and get a line under the full length of the menu bar on hover.
It's nice but on twitter you get a coloured bar under the menu item when you hover - not the whole menu.

Have I got it wrong in my css? Is the twitter method possible?

You could do something like this:

.main-navigation li a:hover {
    box-shadow: inset 0px -5px 0px 0 red;
}

That works.
Is there a possibility to leave it on when you're on the page related to that menu item?

For sure:

.main-navigation li.current-menu-item a,
.main-navigation li a:hover {
    box-shadow: inset 0px -5px 0px 0 red;
}

Thanks Tom - that's a nice effect. Combining them you can get a colour on hover and then have a different colour when you arrive at the page - if you want to. Even have a full bar and then just on the current menu. So many options - mix and match.

.main-navigation li a:hover {
box-shadow: inset 0px -3px 0px 0px colour_here;
}
.main-navigation li.current-menu-item a {
box-shadow: inset 0px -1px 0px 0px colour_here;
}

No problem! Glad you like it :)