Jump to content

transparent and smaller mobile menu in brine / squarespace 7.0

Go to solution Solved by Beyondspace,

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

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution

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>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.