[Resolved] Underline on sub menu items?

Home Forums Support Underline on sub menu items?

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1226622
    Rickard

    Hello!

    I have a underline when I hover over the menu items using the code below, but how can I make it underline the sub menu items also?

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 12px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    
            display: block;
            width: 0;
            height: 2px;
    
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        .main-navigation .menu > .menu-item.current-menu-item > a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
        .main-navigation .menu > .menu-item > a:hover::after {
            width: 80%;
        }
    }
    #1226709
    Leo
    Staff
    Customer Support

    Hi there,

    We find that hover effect doesn’t really look good for submenu items but try this:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 12px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    
            display: block;
            width: 0;
            height: 2px;
    
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        .main-navigation .menu > .menu-item.current-menu-item a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor a::after,
        .main-navigation .menu > .menu-item a:hover::after {
            width: 80%;
        }
    }
    #1226727
    Rickard

    No you’re right, it doesn’t look good on sub menu.

    Will go for changing color on hover instead.

    Thank you though!

    #1226884
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.