Bottom border that spans the width of menu item text in Genesis Sample Theme?

[undercurrent]

Hello,

I have the Genesis Sample Theme, and I'm trying to add a bottom border that spans the width of text of each menu item when hovered. I initially thought to use text-decoration: underline, but I want to increase the padding-bottom and can't with this. I'm trying to get my menu item underlines like this: http://spyr.me/

Any help would be greatly appreciated!

My website is below:

http://www.allaboutskinlightening.net

[Susan]

Try adding this to your stylesheet (using Firebug, I identified around line 225):

.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;
}

[undercurrent]

Thank you!

Is there a way to make the border-bottom the same width as the text?

[undercurrent]

Can anyone help me figure out how to make the border-bottom span the same width as the text of the menu items?

Any advice would be appreciated! 🙂

[undercurrent]

I'm still trying to get the bottom border to match the width of my menu items. Any help would be greatly appreciated!

Bottom border works:

.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;
}

Site: allaboutskinlightening.net

[Author]

Posts