Change hover and active state of nav-item

[Lars]

Hello,

how I change the look of hover and active state of nav-items?

I want that hover and active is only underlined.

Best regards
Lars

[Kyle – SUPPORT]

Hi

Add this to your custom css:

nav .menu > li.menu-item:hover, nav .menu > li.menu-item.current-menu-item > a, nav.std-menu .menu > li:hover > a, nav.std-menu .menu > li.current-menu-item > a {
  text-decoration: underline;
}

– Kyle

[Lars]

okay, this is great thanks for that.

But the line is to close to the text. I tried to use border-buttom instead of underline:

nav .menu > li.menu-item:hover, nav .menu > li.menu-item.current-menu-item > a, nav.std-menu .menu > li:hover > a, nav.std-menu .menu > li.current-menu-item > a {
  	color: #222222;
	border-bottom: 1px solid #222222;
}

But the Problem is that the container becomes the border. Not the text.

[Kyle – SUPPORT]

Try this instead:

nav .menu > li.menu-item:hover, nav .menu > li.menu-item.current-menu-item, nav.std-menu .menu > li:hover, nav.std-menu .menu > li.current-menu-item {
  	color: #222222;
    border-bottom: 1px solid #222222;
}

– Kyle

[Lars]

no, it doesn’t work.

[Kyle – SUPPORT]

Can you please mockup a screenshot of what you’re trying to achieve?

– Kyle

[Lars]

Look in the attachment.

Attachments:

You must be logged in to view attached files.

[Lars]

the line should be like the mockup. maybee the line goes 2 oder 4px down.

[Kyle – SUPPORT]

Try this:

nav .menu > li.menu-item:hover .menu-item-text, nav .menu > li.menu-item.current-menu-item .menu-item-text, nav.std-menu .menu > li:hover .menu-item-text, nav.std-menu .menu > li.current-menu-item .menu-item-text {
  color: #222222;
  border-bottom: 2px solid;
}

– Kyle

[Lars]

It works! Perfect! Magic-Kyle! Thank you!

[Kyle – SUPPORT]

No problem