[Resolved] Border Bars to the left of Drop Down Items on Hover

Home Forums Support Border Bars to the left of Drop Down Items on Hover

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #366887
    Brian

    Hey guys,

    I am currently using this CSS to create a border animation underneath my primary navigation menu items (upon hover & for current page):

    /* nav links effect */
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
    	color: #1e73be;
        left: 50%;
        bottom: 9px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    
        display: block;
        width: 0;
        height: 3px;
    
        background-color: currentColor;
        transition: .2s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 65%;
    	color: #1e73be;
    }

    I would like to have a similar effect with the drop down menu items, only with those have the border show to the left. Messed around with it a bit, but not sure how to accomplish that. Any help appreciated.

    Thanks!

    GP Premium 1.4.2
    #366993
    Tom
    Lead Developer
    Lead Developer

    Are you looking for an animated border on the left? Any examples?

    #367379
    Brian

    Hey Tom,

    I am hoping for it to look identical to my main menu items, but instead of being underneath, I need it to be to the left for when I am hovering or navigating to the drop down menu items. It really doesn’t even need to be an animation, just for a border to show up when the mouse hovers.

    Here’s a link so you can see what I have so far:
    https://stockbagger.com/

    I unfortunately do not have any real world examples, it’s just something I’m imagining in my head at the moment

    Thank you!

    #367687
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .main-navigation .sub-menu li a {
        border-left: 2px solid transparent;
    }
    
    .main-navigation .sub-menu li a:hover {
        border-left: 2px solid #1e73be;
    }
    #367895
    Brian

    Tom,

    That worked great.

    Thank you very much!

    #368032
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.