Help to left align the hamburger navigation on desktop website

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!

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;
}

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!

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;
}
}