Make Menu appear when hover on something

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

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.

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

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.

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

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

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

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

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.