Mobile Navigation Half Width

Site URL: https://www.BAHFineArt.com

Hello!  I'm trying to make the:

1. Mobile Navigation menu appear half width (in mobile view only) like the one pictured below. 
2. Additionally, how can I make it open and overlap the rest of the page? 
3. Make the rest of the page semi transparent when open? 
4. Reduce font size when open?
    

Of course I would also love to reduce the font size, all mobile only.   Thank you so much!!!

Hi, there! I had exactly the same questions a few days back (and still working on solving them) 🙂 But question 3 can be easily resolved in change settings in SITE STYLES (so no extra code needed for that) 🙂 @DevonHarris

Thanks @ievavi I’ll post an update if I figure it out!  @rebeccagracedesigns do you have any ideas?  I know you have a blog post similar, I’m looking for css specific to when the nav menu is open.  Can you help?  

On 6/2/2021 at 8:26 PM, DevonHarris said:

Thanks @ievavi I’ll post an update if I figure it out!  @rebeccagracedesigns do you have any ideas?  I know you have a blog post similar, I’m looking for css specific to when the nav menu is open.  Can you help?  

Were you able to find a solution, @DevonHarris?

Hey @ievavi I did get the correct code from a friend but haven’t tested it yet, will do so tomorrow night and post here when I do 🙂 

On 6/19/2021 at 4:11 AM, DevonHarris said:

Hey @ievavi I did get the correct code from a friend but haven’t tested it yet, will do so tomorrow night and post here when I do 🙂 

Amazing! Will be looking forward to hearing your updates!!

@DevonHarris

I will make a blog post on this but here is some code that I think will create the effect you are looking for. This code is written for Squarespace 7.1. 

.header-menu {
  width: 60vw;  /*width of the header menu */
}
#page {
  transition: opacity 1s; /* transparency animation */
}
.header--menu-open #page {
  opacity: 30%;  /* makes page transparent when mobile menu is open */
}

.header-menu-nav-folder-content {
  justify-content: flex-start; /* vertical alignment of navigation */
  text-align: left; /* navigation text alignment */
}

.header-menu-cta {
  width: 60vw; /* width of button */
}
.header-menu-cta a {
  min-width: unset !important;
}

On 6/25/2021 at 12:17 PM, rebeccagracedesigns said:

@DevonHarris

I will make a blog post on this but here is some code that I think will create the effect you are looking for. This code is written for Squarespace 7.1. 

.header-menu {
  width: 60vw;  /*width of the header menu */
}
#page {
  transition: opacity 1s; /* transparency animation */
}
.header--menu-open #page {
  opacity: 30%;  /* makes page transparent when mobile menu is open */
}

.header-menu-nav-folder-content {
  justify-content: flex-start; /* vertical alignment of navigation */
  text-align: left; /* navigation text alignment */
}

.header-menu-cta {
  width: 60vw; /* width of button */
}
.header-menu-cta a {
  min-width: unset !important;
}

worked great, THANK YOU SO MUCH!!!  Can you please post a link to the blog when you write it? 🙂 

Here you go... https://www.rebeccagracedesigns.com/blog/change-width-of-mobile-menu 

Hi @rebeccagracedesigns  can you please help me with coding for the below mobile menu