Jump to content

Help to left align the hamburger navigation on desktop website

Recommended Posts

Posted

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!

 

 

MYK-web-navigation-example.png

  • vik-web changed the title to Help to left align the hamburger navigation on desktop website
Posted

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

 

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!)

Posted
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!

MYK-web-navigation-example.png

Posted
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!

MYK-web-navigation-example.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.