DevonHarris Posted June 2, 2021 Share Posted June 2, 2021 (edited) Site URL: https://www.BAHFineArt.com Hello! I'm trying to make the: Mobile Navigation menu appear half width (in mobile view only) like the one pictured below. Additionally, how can I make it open and overlap the rest of the page? Make the rest of the page semi transparent when open? Reduce font size when open? Of course I would also love to reduce the font size, all mobile only. Thank you so much!!! Edited June 2, 2021 by DevonHarris formatting Link to comment
0 ievavi Posted June 2, 2021 Share Posted June 2, 2021 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 DevonHarris Posted June 2, 2021 Author Share Posted June 2, 2021 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? Link to comment
0 ievavi Posted June 17, 2021 Share Posted June 17, 2021 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? Link to comment
0 DevonHarris Posted June 19, 2021 Author Share Posted June 19, 2021 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 🙂 Link to comment
0 ievavi Posted June 21, 2021 Share Posted June 21, 2021 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 rebeccagracedesigns Posted June 25, 2021 Share Posted June 25, 2021 @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 DevonHarris Posted June 29, 2021 Author Share Posted June 29, 2021 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? 🙂 rebeccagracedesigns 1 Link to comment
0 rebeccagracedesigns Posted July 20, 2021 Share Posted July 20, 2021 Here you go... https://www.rebeccagracedesigns.com/blog/change-width-of-mobile-menu Link to comment
0 Chrizb Posted October 18, 2021 Share Posted October 18, 2021 Hi @rebeccagracedesigns can you please help me with coding for the below mobile menu Link to comment
Question
DevonHarris
Site URL: https://www.BAHFineArt.com
Hello! I'm trying to make the:
Of course I would also love to reduce the font size, all mobile only. Thank you so much!!!
formatting
Link to comment
Top Posters For This Question
2
4
3
1
Popular Days
Jun 2
3
Jun 25
1
Jun 29
1
Jun 17
1
Top Posters For This Question
rebeccagracedesigns 2 posts
DevonHarris 4 posts
ievavi 3 posts
Chrizb 1 post
Popular Days
Jun 2 2021
3 posts
Jun 25 2021
1 post
Jun 29 2021
1 post
Jun 17 2021
1 post
Popular Posts
DevonHarris
worked great, THANK YOU SO MUCH!!! Can you please post a link to the blog when you write it? 🙂
Posted Images
9 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment