vik-web Posted July 21, 2022 Share Posted July 21, 2022 Site URL: http://rust-lavender-rxjl.squarespace.com Hi, Can someone please help me make the hamburger icon left aligned on the desktop website and also the text that appears after you click on the icon needs to be smaller and left aligned. I have attached a photo of a mockup how it should look. Site password: mallorykaye1 I have used a custom code to implement the hamburger navigation in the website: .header .header-burger{display:flex;} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; } Any help will be much appreciated! Thank you for your time! Link to comment
tuanphan Posted July 22, 2022 Share Posted July 22, 2022 Hi. You can consider adding a Folder with items. Then we will use this CSS (Design > Custom CSS) to change Folder Title to Burger icon a.header-nav-folder-title:after { font-size: 12px; content: "\e030"; font-family: 'squarespace-ui-font'; font-size: 50px; } a.header-nav-folder-title { font-size: 0; } vik-web 1 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
vik-web Posted July 27, 2022 Author Share Posted July 27, 2022 On 7/22/2022 at 10:29 AM, tuanphan said: Hi. You can consider adding a Folder with items. Then we will use this CSS (Design > Custom CSS) to change Folder Title to Burger icon a.header-nav-folder-title:after { font-size: 12px; content: "\e030"; font-family: 'squarespace-ui-font'; font-size: 50px; } a.header-nav-folder-title { font-size: 0; } Hi @tuanphan Thank you for the reply! Your new code has perfectly left aligned the burger icon however the list of pages now appears when I hoover over the icon. Is it please possible to make the list of pages appear only when I click on the burger icon and is it also possible to make the white background cover the whole window once you click on the burger icon? Please see the an example image attached of how the website should look when someone clicks on the burger icon. Really appreciate your help! Thanks! Link to comment
tuanphan Posted July 28, 2022 Share Posted July 28, 2022 23 hours ago, vik-web said: Hi @tuanphan Thank you for the reply! Your new code has perfectly left aligned the burger icon however the list of pages now appears when I hoover over the icon. Is it please possible to make the list of pages appear only when I click on the burger icon and is it also possible to make the white background cover the whole window once you click on the burger icon? Please see the an example image attached of how the website should look when someone clicks on the burger icon. Really appreciate your help! Thanks! If you want this, you can remove my approach,, use normal navigation items, then use this code @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } 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