add an overlay drop down menu page

hi all!

is it possible to make something similar to this when you press the * icon...?

many thanks!

Hi @pet4r, This can be done with custom CSS code. Thanks!

ciao Lesum! 

thanks for the answer! so you say its possible to do it?

i tried this solution but its not actually working as i wanted to...

.header-nav .header-nav-item--folder .header-nav-folder-content{

 width: 100vw!important;

 position:fixed;

 background: #e5f5f6!important;

}

.header-nav-folder-content{

 display:;

 justify-content: center;

}

.header-nav-folder-item {

 margin-left: rem;

 margin-right: rem

}

.header-nav-folder-content a:hover {

font-weight:bold

}

Yes with CSS. But you need to use another CSS code. If you provide site URL, we can help easier.

sure here it is 

https://www.pietrofavaron.com/

almost reached a solution that works for me...just trying to invert the color of the website when the drop down menu appears

On 8/27/2023 at 5:09 PM, pet4r said:

almost reached a solution that works for me...just trying to invert the color of the website when the drop down menu appears

So did you solve or still need help?

On 8/29/2023 at 12:28 PM, tuanphan said:

So did you solve or still need help?

i kind of managed to make it as i want, just wondering how i could make it full page but leaving the menu icon on top of the drop down menu, as if i do a full page drop down menu right now it goes on top of everything, even menu icon, but if i dont i still see the page below the menu on the top as shown on the image below...is it possible to fix it?

thanks!

You mean make menu cover this header bar on scroll?

On 9/3/2023 at 10:42 AM, tuanphan said:

You mean make menu cover this header bar on scroll?

Exactly, I tried to extend the overlay background but it will cover even the menu icon and everything else. I’m ok with covering the name and the icon on the right, but I want to keep the menu icon in the center. 
 

also I would like to change the icon from hover action only to a simple button

Try this to Custom CSS

.header-nav-folder-content {
    top: 0 !important;
}

On 9/7/2023 at 10:56 AM, tuanphan said:

Try this to Custom CSS

.header-nav-folder-content {
    top: 0 !important;
}

 

just tried, not working as wanted, ends upo on top of everything, even moving to the top of the page. i want it to stay where it is and covering everything but the menu icon in the middle. Also if possible i would love to make it as a button not just a hover item, cause sometimes there is a gap between the icon and the overlay, so when you move the mouse towards the list it disappear and you cant choose the item. 

many thanks for the help!