Jump to content

Custom burger menu on desktop 7.1

Recommended Posts

Site URL: http://uppercutdanseteater.squarespace.com

Hi!

I would like to have a burger menu on the right side corner of my website, but when clicking on it, it hides the background as if I'm entering a new site. And I would like it to look like this: 

(transparent when you click on the burger so that you still se the background as well as to be able to use the folders) 

1795553448_Skarmavbild2020-12-03kl_17_12_49.thumb.png.8c0f17253d465d3135f1d3971e761240.png

I am currently using this code:

@media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}}

 

and I only managed to do this to my site: 

 

1737186758_Skarmavbild2020-12-03kl_17_12_12.thumb.png.7ff2a3d460449645d9781cd3a030bc79.pngSkärmavbild 2020-12-03 kl. 17.12.26.png

 

I have searched for DAYS and I'm really a beginner with coding so I would appriciate the help SO MUCH : ))

 

 

Skärmavbild 2020-12-03 kl. 17.13.01.png

Skärmavbild 2020-12-03 kl. 17.12.49.png

Link to comment
  • Replies 5
  • Created
  • Last Reply
On 12/3/2020 at 11:16 PM, uppercutlinn said:

Site URL: http://uppercutdanseteater.squarespace.com

Hi!

I would like to have a burger menu on the right side corner of my website, but when clicking on it, it hides the background as if I'm entering a new site. And I would like it to look like this: 

(transparent when you click on the burger so that you still se the background as well as to be able to use the folders) 

1795553448_Skarmavbild2020-12-03kl_17_12_49.thumb.png.8c0f17253d465d3135f1d3971e761240.png

I am currently using this code:

@media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}}

 

and I only managed to do this to my site: 

 

1737186758_Skarmavbild2020-12-03kl_17_12_12.thumb.png.7ff2a3d460449645d9781cd3a030bc79.pngSkärmavbild 2020-12-03 kl. 17.12.26.png

 

I have searched for DAYS and I'm really a beginner with coding so I would appriciate the help SO MUCH : ))

 

 

Skärmavbild 2020-12-03 kl. 17.13.01.png

Skärmavbild 2020-12-03 kl. 17.12.49.png

Could you try this css

body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-bg {
  background-color: transparent;
}
body[data-menu-overlay-theme-switcher="true"].header--menu-open .header .header-burger .top-bun, body[data-menu-overlay-theme-switcher="true"].header--menu-open .header .header-burger .patty, body[data-menu-overlay-theme-switcher="true"].header--menu-open .header .header-burger .bottom-bun {
  background: #fff;
}
body[data-menu-overlay-theme-switcher="true"] .header-menu .header-menu-nav a:not(.btn) {
  color: #fff;
  padding: 0;
  padding-bottom: 0.7em;
  font-size: 4vmin;
}

image.thumb.png.9e51114aab28b42e94b538634a323042.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...
7 hours ago, uppercutlinn said:

I think I am maybe doing it wrong... cause it doesn't work.. : - )))

Have you add it into Design->Custom CSS

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
12 hours ago, uppercutlinn said:

yep! not working : ((

 

take screenshot of how your custom css screen look like

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.