Jump to content

add an overlay drop down menu page

Recommended Posts

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;


 background: #e5f5f6!important;






 justify-content: center;



.header-nav-folder-item {

 margin-left: rem;

 margin-right: rem



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





Link to comment
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?



Link to comment
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

Link to comment
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!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.