[Support request] Make Menu appear when hover on something

[liorsade8]

Hi
is it possible to make a menu been shown while in hover on an item
example:
https://www.boh.co.il/en

make the menu appear when in hover with mice on something / on MENU / on HAMBURGER
thanks

[liorsade8]

i see that in the example site – the menu appear when mouse is hovering the header / navigation…

[David]

Hi there,

that would require Custom Development – but if you want to provide a link to your current site i will take a look and provide you some pointers.

[liorsade8]

hi
thanks for the quick replay
it’s a new site…
so there is nothing on it:
http://cole-roofing-services.s388.upress.link

[David]

This would be the basic CSS to do that:

/* Set transition for hover */
#site-navigation {
    transition: all 0.2s;
}
/* When nav is NOT hovered set background to transparent */
#site-navigation:not(:hover) {
    background: transparent;
    transition: background 0.2s;
}
/* When nav ig NOT hovered set hidden menu items to transparent */
#site-navigation:not(:hover) li.hidden a {
    color: transparent;
}

Now you just need to give each Menu item that you want Hidden ( when its not hovered ) a CSS Class of hidden

This article explains how to add classes to menu items.

[liorsade8]

hi
sorry but how do i do this:

Now you just need to give each Menu item that you want Hidden ( when its not hovered ) a CSS Class of hidden

thanks

[David]

Ooops – here is the link explaining how to add the CSS Classes:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[liorsade8]

hi
i know how to give CSS class, but i dont know the line of code for making it hidden.
could u please help?
thanks

[David]

All you need to do is add the CSS i provided here:

https://generatepress.com/forums/topic/make-menu-appear-when-hover-on-something/#post-1596937

The last CSS rule there ie this one:

/* When nav ig NOT hovered set hidden menu items to transparent */
#site-navigation:not(:hover) li.hidden a {
    color: transparent;
}

is what sets the menu items with a class of hidden to transparent.

[Author]

Posts