Navigation CSS line below current page name

[kgshultz]

Hi,

If you look at my website (www.kgshultz.com) you'll see that there is a line under the navigation menu. However, the line disappears under the name of the current page. I've been looking everywhere and I can't seem to find what that is called/what controls the line disappearing. Through CSS I think I've changed the color of everything else just trying to figure out what controls the disappearance of that line 🙂 I would like the line to be solid all the way across all the time. The only thing I want to show which page you're on is the text changing color.

If someone could point me in the right direction, it would be greatly appreciated.

Thanks!

http://www.kgshultz.com

[Tony @ AlphaBlossom]

Hello,

You'll have to add "display: block;" to your link element inside the nav. Change your .genesis-nav-menu a to this:

.genesis-nav-menu a {
    display: block;
    padding: 20px;
    position: relative;
}

Have a great day!
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[rfmeier]

Hello,

There is padding that is pushing the link (which has a white background) over the blue line. It can be fixed within your style.css file.

/* style.css line ~952 */
.genesis-nav-menu a {
    color: #124E67 /* #617984; */
    display: block;
    padding: 20px;
    padding-bottom: 0; /* remove the bottom padding if the link */
    position: relative;
}

That should take care of the problem.

---

Ryan Meier – Twitter

[eamonmoriarty]

At line 959 of style.css you have

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	background-color: #fff;
	color: #124E67;
}

If you remove background-color: #fff; I think that will achieve what you want.

---

Eamon Moriarty
EM Dzine

[kgshultz]

Excellent, thank you! I removed the padding under the link and now it looks perfect.

[Author]

Posts