Hiding and Showing :before thru Jquery or better solution?

2 Views

Ok, this is driving me crazy. We installed a WP plugin to create a “Mega Menu”. Now the hover bottom arrow on each menu is being affected on the menus that have the this mega menu applied to (“Connect” and “Resources”). Originally, it was placed on the middle of its menus, but since the Mega Menus uses full width, the position gets screw up. So, I hidden the original “arrows” and created another one using a:before to the two mega menu links (“Connect” and “Resources”). Here is the link for the dev environment:

(link) (main menu)

Read More

My question: Is it possible to hide/show or border-bottom color change using pseudos (:before)? I could change the color every time the sub-menu is being displayed.

I would appreciate any help or suggestion of another solution if the one I am trying is not possible.

Also, let me know if you want me to revert back to the initial issue in case you think you can figure it out a better idea with out mine.

Thank you!

Post Views: 2

Related posts

1 comment

  1. I did not tested but something like this.

    a:first-child:before {
    left: 50%;
    top: 9.5px;
    margin: 0px 0px 0px -10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #fff;
    content: " ";
    pointer-events: none;
    position: relative;
    bottom: auto;
    opacity: 0; /* here */
}

a:hover:first-child:before { /*hover*/
    opacity: 1;
}

li.megamenu:hover > a:first-child:before {
    opacity: 1;
}

Comments are closed.