Archived topic

Main Menu Hover border the same width as submenu container

5 replies · Started by Maria Rowena on May 22, 2021

Viewing posts 1–6 of 6

May 22, 2021 at 6:48 pm #1794325

Hi support team,

I managed to create a main menu hover effect by using this css that I found in this forum.

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 12px;
        left: 12px;
        bottom: 0;
        display: block;
        height: 5px;
        background-color: #d5db12;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .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 {
        opacity: 1;
    }
}

I already modofied that code my only problem is, I cannot make the width of the hover border the same width as the submenu container. I want to achieve this. https://snipboard.io/rSkmV3.jpg

So far this is what I got-->https://snipboard.io/vNUow7.jpg

I hope you can help me with this. Thank you so much.

May 23, 2021 at 3:00 am #1794546

Hi there,

can you share a link to your site ?

May 27, 2021 at 8:19 am #1800464

Hi David,

The website is still under construction but you can visit the link I attached.

Thank you so much. I hope to hear from you again. :)

May 27, 2021 at 9:29 am #1800544

Hi Maria,

Try change this part of CSS:

 .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 12px;
        left: 12px;
        bottom: 0;
        display: block;
        height: 5px;
        background-color: #d5db12;
        opacity: 0;
        transition: opacity 0.2s;
    }

to:

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    height: 2px;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.2s;
    width: 200px; /*your submenu width*/
    left: 0;
}

Let me know :)

May 30, 2021 at 4:53 pm #1803890

Hi Ying,

Thank you so much for this!

It's working well.

I don't know if this is too much but,

Do you think it's possible to apply this css to main menu item that has submenu item only?

Thank you so much. I really appreciate.

May 30, 2021 at 5:45 pm #1803903

Hi there,

I don’t know if this is too much but,

Do you think it’s possible to apply this css to main menu item that has submenu item only?

Thank you so much. I really appreciate.

The best practice is to add CSS classes to the menu you want this applied on.

WordPress let's you add CSS classes to menu items so we can specific menu items. See this - https://share.getcloudapp.com/rRujXWO2

With this, we can specifically target menu items you've specifically added classes on.

Example: Say, you've added your-menu-item-class on specific menu items.

.main-navigation .menu > .menu-item.your-menu-item-class > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    height: 2px;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.2s;
    width: 200px; /*your submenu width*/
    left: 0;
}

This archived topic is closed to new replies.

Start building better websites today.