Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

transparent and smaller mobile menu in brine / squarespace 7.0


ellisaurus
Go to solution Solved by bangank36,

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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?

Try to use this <style> @media (max-width: 640px) { .Mobile-overlay-menu { width: calc(70% - 60px); } .Mobile-overlay { background: transparent !

This is amazing! it works! Thank you so so much! 🤗

Posted Images

7 answers to this question

Recommended Posts

  • 0

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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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 post
  • 0
1 hour ago, RossHarrison_1313 said:

Hi. Does this work with 7.1?

 

you should post your site url

Greeting, it's BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post

Create an account or sign in to comment

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


×
×
  • Create New...