Adding Menu Hover

Hello.
How can I make a menu hover like on this page: https://machina.hr/

This is my page: www.dbug.studio

Hello,

You can try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

#mainnav > div > ul > li:hover,
#mainnav > div > ul > li.current-menu-item {
    background-color: red;
    transition-duration: 0.5s;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thanks Roman. I have found that code somewhere else, but the problem is that the hover box isnt streched like on that page to the bottom and top.

I can see the hovers, but only as a text box background, wich is very limited for me.

Try to use this CSS code instead of previous:

@media (min-width: 1025px) {
    #masthead {
        padding-top: 0;
        padding-bottom: 0;
    }

    .col-md-4.col-sm-8.col-xs-12 {
        margin-bottom: 0;
    }

    #mainnav > div > ul > li:hover,
    #mainnav > div > ul > li.current-menu-item {
        background-color: red;
        transition-duration: 0.5s;
    }
	
    #mainnav > div > ul > li {
        padding-top: 20px;
        padding-bottom: 10px;
    }
}

Kind Regards, Roman.

1 Like

Thats it!
Thanks alot. :slight_smile:

You are welcome! :slight_smile:

Kind Regards, Roman.