Jump to content

transparent and smaller mobile menu in brine / squarespace 7.0

Recommended Posts

Site URL: https://ellifischer.de

Hello, 

I have already tried a lot of things, but have not yet come to a result.

I would like the mobile menu not to open over the whole page when you click on it, but only so far that you can see the menu items and the X, from the right. The X should be in the top right corner. The rest of the website should still be visible. I get it with the code:

.mobile-overlay-menu {
    width: calc(~"70% - 60px");
}

 that the menu does not cover the entire page, but neither transparency.

Can anybody help me? Thaaanks!

Link to comment
  • Replies 8
  • Views 965
  • Created
  • Last Reply

Maybe this is what you want, site wide (adds to all pages). Settings -> Advanced -> Code Injection

<style>
.is-mobile-overlay-active .Mobile-overlay-menu {
    width: calc(70% - 60px);
}
.is-mobile-overlay-active .Mobile-overlay {
  background: transparent !important;
}
.is-mobile-overlay-active .Mobile-overlay-nav--primary:before {
  display: none;
}
.is-mobile-overlay-active .Mobile-overlay-close {
  left: auto;
  right: 0;
}
</style>

image.thumb.png.7d17f175cea59948f8881b0a6e2f0921.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

Wow! Thanks! It works and looks so good! Just a little problem: when clicking the x for closing, it jumped for a second to the left side before closing. Is it something that can be fixed with coding?

thanks so much for your help! 

Link to comment

Try to use this

<style>
	@media (max-width: 640px) {
        .Mobile-overlay-menu {
          width: calc(70% - 60px);
        }
        .Mobile-overlay {
          background: transparent !important;
        }
        .Mobile-overlay-nav--primary:before {
          display: none;
        }
        .Mobile-overlay-close {
          left: auto !important;
          right: 0 !important;
        }
      }
</style>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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 months later...
1 hour ago, RossHarrison_1313 said:

Hi. Does this work with 7.1?

 

you should post your site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
On 12/3/2020 at 9:06 PM, RossHarrison_1313 said:

hey @bangank36 my site is https://flatworm-finch-f4nw.squarespace.com/config/pages

Thanks so much for your help

I see your header is transparent. Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.