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

Mobile Navigation Half Width


Question

Posted (edited)

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!!!

 

mobile nav.PNG

Edited by DevonHarris
formatting
Link to comment

8 answers to this question

Recommended Posts

  • 0

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

Link to comment
  • 0
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!!

Link to comment
  • 0

@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;
}

Link to comment
  • 0
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? 🙂 

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...