Dee12 6 Share Posted October 12, 2020 Site URL: https://www.uniquelydolledwigs.com/ Hello, I recently found a code that makes my mobile nav menu slide to the left of the screen and to only expand 80% of the screen. Is there a code that will make the background screen fade when the nav is open? Also, is there a way to remove my logo at the top when I open the nav menu? I’ve attached an example of how I would like it. Any help would be appreciated! Link to post
tuanphan 9,583 Share Posted October 13, 2020 Add to Home > Design > Custom CSS .header--menu-open .header-title-logo img { visibility: hidden; } Dee12 1 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Dee12 6 Author Share Posted October 13, 2020 (edited) Thank you, it worked! @tuanphan Is there a way to make an overlay color to fade the main site content like the picture below? Edited October 13, 2020 by Dee12 Link to post
Olclarke 0 Share Posted October 14, 2020 @Dee12 Can you share the code to slide menu from left? Link to post
Dee12 6 Author Share Posted October 17, 2020 @Olclarke yes, its: @media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px ) { /* pull the menu off the left edge of the screen */ .header-menu { /* -1024px off the left edge of screen plus a little extra because it might not be quite enough on a 1024px screen */ left: calc( -1024px - 5vw ); } } /* when the menu is open sweep in from the left */ .header--menu-open .header-menu { left: 0; /* transition time in seconds changing the number? be sure to change all three values! */ -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .header-menu.header-menu--folder-list { width: 85%; } .header-menu-nav-folder { overflow-y: hidden; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 75% ); -ms-transform: translatex( 75% ); transform: translatex( 75% ); visibility: hidden; } @media screen and (max-width: 767px ) { .header-menu.header-menu--folder-list { width: 78%; } .header-menu-nav-folder:not( .header-menu-nav-folder--active ) { -webkit-transform: translatex( 65% ); -ms-transform: translatex( 65% ); transform: translatex( 65% ); visibility: hidden; } } Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment