How to add bottom borders to menu items in Genesis Sample Theme?

[undercurrent]

Hello,

My blog runs on the Genesis Sample Theme, and I'm having a difficult time trying to add bottom borders that span the text (same width) of my menu items when hovered over. I tried to accomplish this by using 'text-decoration: underline', but I need more spacing between the underline and the text, and I cannot figure out how to do that (or if that's even possible) with this property.

So, I'm thinking using the bottom-border property is the only way to go. This code brings about a bottom border to each menu item, but it doesn't span the same width of each item. Also it's too far down from the menu items, and I don't know how to increase its height:

.genesis-nav-menu li.current-menu-item > a,
.genesis-nav-menu > li > a {
	border-bottom: 2px solid transparent;
}

.genesis-nav-menu li.current-menu-item > a:hover,
.genesis-nav-menu li.current-menu-item > a,
.genesis-nav-menu > li > a:hover {
	border-color: #E00E79;
}

Any help would be greatly appreciated.

http://www.allaboutskinlightening.net

[Christoph]

Hi,

you could try targeting the span:

.genesis-nav-menu span:hover {
	border-bottom: 3px solid #E00E79;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[undercurrent]

Thank you, that works great!

Is there any way to increase the height of the bottom-border?

Thanks again for your help!

[Author]

Posts