Archived topic

Hide bottom border on active main navigation tab

3 replies · Started by Paul on July 15, 2015

Viewing posts 1–4 of 4

July 15, 2015 at 6:45 pm #121346

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.

July 15, 2015 at 11:37 pm #121415

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

July 16, 2015 at 4:29 pm #121663

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:
home tab

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:

tab 2

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

July 16, 2015 at 4:38 pm #121664

Nice, glad I could help out a bit! :)

Thanks for posting the code!

This archived topic is closed to new replies.

Start building better websites today.