AlyRaymer Posted November 12, 2021 Share Posted November 12, 2021 Site URL: https://alyraymertest.squarespace.com/ Hi there, I have two questions I am hoping you can help me with: I'd like for my mobile nav to be on the right side instead of the left I'd like the text in the mobile menu to change color upon hover I am using the following code: //mobile menu on desktop adjustments// @media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}} .Mobile-overlay {width:60%; background-color:#FFF} //mobile menu on desktop adjustments// .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;} //custom font mobile menu// body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item { font-family: 'agharti-condensed-black'!important; font-size: 60px; letter-spacing:.07em; line-height: 1em; text-transform: uppercase } Thank you in advance! 🙂 Site: https://alyraymertest.squarespace.com/, PW: aly7654 Link to comment
Beyondspace Posted November 14, 2021 Share Posted November 14, 2021 On 11/12/2021 at 11:15 PM, AlyRaymer said: Site URL: https://alyraymertest.squarespace.com/ Hi there, I have two questions I am hoping you can help me with: I'd like for my mobile nav to be on the right side instead of the left I'd like the text in the mobile menu to change color upon hover I am using the following code: //mobile menu on desktop adjustments// @media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}} .Mobile-overlay {width:60%; background-color:#FFF} //mobile menu on desktop adjustments// .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;} //custom font mobile menu// body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item { font-family: 'agharti-condensed-black'!important; font-size: 60px; letter-spacing:.07em; line-height: 1em; text-transform: uppercase } Thank you in advance! 🙂 Site: https://alyraymertest.squarespace.com/, PW: aly7654 Hi You can try adding to Home > Design > Custom Css .is-mobile-overlay-active .Mobile-overlay { right: 0; left: unset; } .Mobile-overlay-nav.Mobile-overlay-nav--primary a:hover { color: purple; transition: color 0.5s linear; } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
AlyRaymer Posted November 15, 2021 Author Share Posted November 15, 2021 On 11/14/2021 at 5:11 AM, bangank36 said: Hi You can try adding to Home > Design > Custom Css .is-mobile-overlay-active .Mobile-overlay { right: 0; left: unset; } .Mobile-overlay-nav.Mobile-overlay-nav--primary a:hover { color: purple; transition: color 0.5s linear; } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too Thank you! That works, testing here: Site: https://alyraymertest.squarespace.com/, PW: aly7654 Now that it's tested, is there a way to clean up and simplify this CSS? Or is it better to keep all of it? //mobile menu on desktop adjustments// @media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}} .Mobile-overlay {width:60%; background-color:#FFF} //mobile menu center text// .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;} //custom font mobile menu// body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item { font-family: 'agharti-condensed-black'!important; font-size: 60px; letter-spacing:.07em; line-height: 1em; text-transform: uppercase }//mobile menu right side// .is-mobile-overlay-active .Mobile-overlay { right: 0; left: unset; } //menu text to purple/ .Mobile-overlay-nav.Mobile-overlay-nav--primary a:hover { color: #5834e7; transition: color 0.3s linear; } Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 On 11/15/2021 at 9:39 PM, AlyRaymer said: Thank you! That works, testing here: Site: https://alyraymertest.squarespace.com/, PW: aly7654 Now that it's tested, is there a way to clean up and simplify this CSS? Or is it better to keep all of it? //mobile menu on desktop adjustments// @media screen and (min-width:400px) { [data-nc-base="mobile-bar"] {display: block!important; margin-top:0% } .Header, {display: none!important;}} .Mobile-overlay {width:60%; background-color:#FFF} //mobile menu center text// .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;} //custom font mobile menu// body:not(.tweak-mobile-overlay-menu-primary-style-button) .Mobile-overlay-nav .Mobile-overlay-nav-item { font-family: 'agharti-condensed-black'!important; font-size: 60px; letter-spacing:.07em; line-height: 1em; text-transform: uppercase }//mobile menu right side// .is-mobile-overlay-active .Mobile-overlay { right: 0; left: unset; } //menu text to purple/ .Mobile-overlay-nav.Mobile-overlay-nav--primary a:hover { color: #5834e7; transition: color 0.3s linear; } You should keep it, no need to shorter it. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment