[Resolved] Hide bottom border on active main navigation tab

Home Forums Support Hide bottom border on active main navigation tab

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #121346
    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.

    #121415
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #121663
    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:
    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!

    #121664
    Tom
    Lead Developer
    Lead Developer

    Nice, glad I could help out a bit! 🙂

    Thanks for posting the code!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.