transparent and smaller mobile menu in brine / squarespace 7.0

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!

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>

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! 

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

Hi. Does this work with 7.1?

1 hour ago, RossHarrison_1313 said:

Hi. Does this work with 7.1?

 

you should post your site url

53 minutes ago, bangank36 said:

you should post your site url

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

Thanks so much for your help

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?