I've added a CSS code dding a line that appears to grow from left to right directly beneath the menu item being hovered over. It will also set a static line directly beneath the active page link. I want to know if is possible to exclude the Instagram Icon link, and make the CSS work only on the other menu items.
This is my CSS code:
This is my CSS code:
CSS:
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #94812b;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}
Last edited by a moderator: