[Resolved] Hide bottom border on active main navigation tab

[Paul]

Hi Tom,

I am trying to create a “tab” type main menu, so I set the primary navigation bar to have a bottom border but need to hide the bottom border for the active page/menu item that has been selected. I can’t seem to make the bottom border disappear on the active “tab”. Any suggestions? I’ve tried a host of different CSS tweaks, but none seem to work.

Thanks.

[Tom]

You could try setting a box shadow on the current menu item.

For example, if your current menu item is white:

.main-navigation .main-nav ul .current-menu-item > a {
      box-shadow: 1px 1px 0 #fff;
}

[Paul]

Tom, that definitely put me on the right track!

First I used box-shadow as you suggested:

.main-navigation .main-nav ul .current-menu-item > a {
	border-top: 2px solid #450256;
	border-right: 2px solid #450256;
	border-left: 2px solid #450256;
	box-shadow: 0px 2px 0px 0px #93D340;
}

but that left 1 pixel at the bottom corner of the tab as in this image:

So to fix that, instead of using border-bottom on .main-navigation, I used box-shadow instead:

.main-navigation {
	/* border-bottom: 2px solid #450256; */
	box-shadow: 0px -2px 0px 0px #450256 inset;
}

Which resulted in:

Exactly what I was looking for. Thanks for the clue!

[Tom]

Nice, glad I could help out a bit! 🙂

Thanks for posting the code!

[Author]

Posts