aunderwood Posted May 17, 2022 Posted May 17, 2022 Site URL: https://www.rlsignings.com HELP! I have a client asking for a hamburger menu on the left of her desktop page with her currently active button left on the right of the screen. She wants the mobile menu to be "normal" as it currently is. I've searched so many streams and I have no idea what kind of css to use to make this happen. I can revert the current home page menu to a mobile hamburger style, but that inserts the button into the menu where my client would like it to stay in the header. How can I accomplish this?! Thank you!!!
tuanphan Posted May 20, 2022 Posted May 20, 2022 You mean replace menu text with burger icon? Add to Design > Custom CSS a.header-nav-folder-title:before { content: "\e030"; font-family: 'squarespace-ui-font'; font-size: 30px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
aunderwood Posted May 20, 2022 Author Posted May 20, 2022 2 hours ago, tuanphan said: You mean replace menu text with burger icon? Add to Design > Custom CSS a.header-nav-folder-title:before { content: "\e030"; font-family: 'squarespace-ui-font'; font-size: 30px; } Yes, that is wonderful BUT now when we go to the mobile menu someone would have to click on the burger (or the word "menu") inside the burger to get to the actual links. Is there a code to bypass the folder itself and take a mobile viewer straight to the contents of hte folder without having to see that option in the mobile menu?
tuanphan Posted May 21, 2022 Posted May 21, 2022 9 hours ago, aunderwood said: Yes, that is wonderful BUT now when we go to the mobile menu someone would have to click on the burger (or the word "menu") inside the burger to get to the actual links. Is there a code to bypass the folder itself and take a mobile viewer straight to the contents of hte folder without having to see that option in the mobile menu? Add this CSS @media only screen and (max-width: 767px) { .header-menu-nav-folder[data-folder="root"] { display: none !important; } .header-menu-nav-folder-content .header-menu-controls { display: none; } .header-menu-nav-folder:not([data-folder="root"]) { transform: unset; transition: unset; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment