Jump to content

Hamburger Menu Nav across all devices (version 7.1)

Go to solution Solved by inside_the_square,

Recommended Posts

On 1/7/2021 at 7:13 AM, Tayloramy said:

Hello!

I am still new to squarespace!

I am wanting to put the hamburger navigation with 3 lines on the left so my social links are on the right? Can anyone help with that? thank you!

Edit Site Header > Header Layout > Select Layout: Navigation - Logo - Button

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

Link to comment
On 1/5/2021 at 7:44 PM, ehernandezkpg said:

Hi guys, I hate to add on to the questions but does anyone know how to get the burger menu with three lines and the actual word "menu" to the side or on top? Or can I just custom create a vector and upload and replace link from previous post about three lines? It's the LAST thing I need to finally publish the site 😞

Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?

Thank you

Add to Design > Custom CSS

.burger-box:before {
    content: "Menu";
    color: white;
    display: block;
    position: relative;
    top: -20px;
}

 

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

Link to comment
On 1/2/2021 at 6:39 PM, saltclo said:

I have used the code to implement the hamburger menu, everything is working even with the social links and cart showing too.

The problem I have ran in to is that the logo is not centered, with it being placed just slightly right of where it should be 1538254169_Screenshot2021-01-02at17_38_52.thumb.png.9449cfb659a499d7a4dcfaff27bafac2.png

Can anyone help with this?

Any update about center the logo? Would love to know too.

Link to comment
On 2/8/2020 at 9:50 AM, inside_the_square said:

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 



.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

Hi there!

I'm fairly new to Squarespace and sadly really out of practice with CSS. I was hoping you guys can help me, please?

I've used to above CSS code from @inside_the_square to successfully get the three-line hamburger menu to show up on Desktop, but I was wondering how I could get that hamburger to:

  • Display on the left-hand side of the header of the page; and
  • Have the menu take up only a third (or about 33%) of the screen when it opens.

I would also like to know how to get the site name/logo to appear on the right hand side of the page (or even the centre of the page), please, when my hamburger menu is on the left-hand side.

I've used some of the other code suggestions throughout this great thread, but unfortunately only the one quoted above is working for me.

Thank you all so much for your help!

Here's a screenshot of what I have so far:

468243532_ScreenShot2021-01-22at11_59_18.thumb.png.e165d008600b8039e6324865004d5b61.png

Edited by Alexarr
tagging
Link to comment

 

Quote

Please could you help & advise me on changes to code to allow the title logo to be centered as its slightly to the left currently, it isn't active on my page due to it not being correct.

Thanks in advance

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align left */  
  .header .header-burger {
    display: flex;
    order: 0 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: center !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

 

Edited by saltclo
Link to comment
On 1/24/2021 at 4:58 AM, saltclo said:

 

Please could you help & advise me on changes to code to allow the title logo to be centered as its slightly to the left currently, it isn't active on my page due to it not being correct.

Thanks in advance


@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align left */  
  .header .header-burger {
    display: flex;
    order: 0 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: center !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

 

Hi. Can you share site url?

On 1/24/2021 at 11:34 AM, Daisysophia said:

Do you still need help on this?

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

Link to comment
  • 2 weeks later...
On 1/22/2020 at 5:19 AM, rsmith3074 said:

Hey!

I'm using the new Squarespace 7.1 and am having some troubles finding any info on making the nav break at a certain point to enable the mobile hamburger icon for desktop. I don't want their typical nav for desktop, just wanting to have the hamburger icon across all devices. Thanks for any help!

https://chameleon-porcupine-c7jc.squarespace.com/

password: 1234

Hi @tuanphan! I'm having the same problem. I'm using Riley on the new Squarespace and the code doesn't seem to work. Is there an updated code?

My temporary website is https://strawberry-manatee-x48j.squarespace.com/

Thank you so much!

Link to comment
On 2/12/2021 at 6:38 PM, KeraG said:

Hi @tuanphan! I'm having the same problem. I'm using Riley on the new Squarespace and the code doesn't seem to work. Is there an updated code?

My temporary website is https://strawberry-manatee-x48j.squarespace.com/

Thank you so much!

Your site is private. You can setup password & share url again. We can help easier

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

Link to comment
On 2/7/2020 at 11:50 PM, inside_the_square said:

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 



.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

Thank you! Awesome!

Only – nothing happens as I click it!  😮 @inside_the_square & @tuanphan

This is the dev-link for my site:

https://bell-radish-wryh.squarespace.com

As you see I added an image icon as the burger menu. Maybe the issue is linked to that?

Here is the code for it:

.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/602a4403aeefe23588ad8344/t/6032c02eae17b8724c92b2a8/1613938734180/ActionBurgerArtboard+13png.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent !important;
    display: block;
    width: 70px;
    height: 35px;
  padding-right: 0px;
}
.burger-inner>div {
    display: none !important;
}

 

 

Edited by MadsP
Needed more info.
Link to comment
11 hours ago, MadsP said:

Thank you! Awesome!

Only – nothing happens as I click it!  😮 @inside_the_square & @tuanphan

This is the dev-link for my site:

https://bell-radish-wryh.squarespace.com

As you see I added an image icon as the burger menu. Maybe the issue is linked to that?

Here is the code for it:

.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/602a4403aeefe23588ad8344/t/6032c02eae17b8724c92b2a8/1613938734180/ActionBurgerArtboard+13png.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent !important;
    display: block;
    width: 70px;
    height: 35px;
  padding-right: 0px;
}
.burger-inner>div {
    display: none !important;
}

 

 

What is access password?

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

Link to comment
  • 2 weeks later...
On 3/2/2021 at 8:59 PM, KeraG said:

Hi @tuanphan

Here's our updated website: https://nestologystudio.squarespace.com/

pw: kB39gwHAP

 

This is the code I use that doesn't work

Thank you so much!


// Burger menu
@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align left */  
  .header .header-burger {
    display: flex;
    order: 0 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: center !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

 

Hi.Burger looks fine here. Did you solve it?

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

Link to comment
  • Susana_SQSP changed the title to Hamburger Menu Nav across all devices (version 7.1)
  • 3 weeks later...

Hi @tuanphan and others - thanks for your input on this. I'm using the following code - works well except that the links line spacing is huge and I can't figure out how to reduce it. Can you help me fix it? TIA!

site: https://czebrastudios-not-for-nothing.squarespace.com/

pw: philly

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align left */  
  .header .header-burger {
    display: flex;
    order: 0 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
 
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

 /* Link Alignment */ 

.header-menu-nav {text-align: right!important; margin-right: 5%!important;}

/*  Page Background color  */

.header-menu-bg {background: rgba(51,28,25,.85)!important;}

/* menu links style  */
.header-menu-nav-item a {color: white!important; line-height: 0px!important;
    font-size: 20px !important;
    padding: 2px !important;
}

 

Link to comment
On 4/1/2021 at 10:42 AM, junecz said:

Me again... 🙂  I fixed my spacing issue. 

Now: can I remove the menu scroll bar? 

For others looking for help: to fix the spacing I changed

padding: 2px

to

margin: 2vw 0vw

site: https://czebrastudios-not-for-nothing.squarespace.com/

pw: philly

Hi. Add to Design > Custom CSS

/* Remove overlay scrollbar */
@media screen and (min-width:768px) {
.header-menu-nav-folder.header-menu-nav-folder--active {
    overflow: hidden;
}
}

 

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

Link to comment

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.