Menu Hover effect Question

I have a new site I am working on, and I found some css snippets to make the current page have an underline (border-bottom) on the Active page.
But I also want this exact same border-bottom when you hover - just can’t seem to crack it!
here is the site…
http://ryancole.com.au/welcome/

And the CSS that works for active is:

header .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a,
header .fl-page-nav-wrap .navbar-nav > li.current-menu-ancestor > a,
header .fl-page-nav ul.sub-menu li.current-menu-ancestor > a,
header .fl-page-nav ul ul.sub-menu li.current-menu-item a {
   border-bottom: #B3D234 4px solid;
   padding-bottom: 3px;
}

TIA, Dave

Hey Dave,

Try the CSS snippet below and see if it’s what you’re looking for. :slight_smile:

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li > a:hover {
	border-bottom: #B3D234 4px solid;
	padding-bottom: 3px;
}

Thanks!

KC

Thanks KC, really appreciate that.
Looks like I can refactor the Active css too based on that…
Dave

Hey Dave,

I’d suggest that you keep that, you might need it somewhere else within the theme. :slight_smile: It’s up to you, though.

Thanks!

KC