Hamburger Menu Nav across all devices (version 7.1)

hey everyone,

I'm also trying to keep the hamburger menu on desktop.

I've managed to do it, but can't seem to get my logo in the center.

can anyone help?

here's what I've done so far:

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths*/ 
  .header .header-burger {
    display: flex;
  }
  /* 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;
  }
  /* burger position */
.header-display-desktop {
    flex-direction: row-reverse;
}
}

https://janetesilveira.squarespace.com/

ps: 1234

On 5/4/2021 at 12:50 AM, casafloralia said:

hey everyone,

I'm also trying to keep the hamburger menu on desktop.

I've managed to do it, but can't seem to get my logo in the center.

can anyone help?

here's what I've done so far:

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths*/ 
  .header .header-burger {
    display: flex;
  }
  /* 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;
  }
  /* burger position */
.header-display-desktop {
    flex-direction: row-reverse;
}
}

https://janetesilveira.squarespace.com/

ps: 1234

Logo looks centered here. Can you explain clearly?

On 5/5/2021 at 8:34 PM, tuanphan said:

And I also found some problems. You can create new questions, we will help easier

Site URL – https://janetesilveira.squarespace.com/

1. (Desktop-Header) Remove right scroll?

2. (Tablet-Footer) center logo?

3. (Tablet-Homepage) reduce this space?

4. (Mobile-Blog) Add a space between image – read more?

5. (Tablet-Blog posts) Increase post width?

Hi @tuanphan!

Yes! I'd like hep with all that 🙂

20 hours ago, casafloralia said:

Hi @tuanphan!

Yes! I'd like hep with all that 🙂

 

Add to Design > Custom CSS

/* remove scroll bar on burger desktop */
@media screen and (min-width:992px) {
.header-menu-nav-folder--active {
    overflow: hidden;
}
}
/* tablet */
@media screen and (min-width:768px) and (max-width:992px) {
/* center footer logo */
div#page-section-608ffe74d1bf763c75618aca>.row>.col {
    margin: 0 auto;
    width: 100%;
}
/* reduce space */
[data-section-id="6091547b96145d3ee02ae3e6"] {
    min-height: unset !important;
}
/* increase blog width */
.blog-item-inner-wrapper {
    width: 90% !important;
}
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS

/* remove scroll bar on burger desktop */
@media screen and (min-width:992px) {
.header-menu-nav-folder--active {
    overflow: hidden;
}
}
/* tablet */
@media screen and (min-width:768px) and (max-width:992px) {
/* center footer logo */
div#page-section-608ffe74d1bf763c75618aca>.row>.col {
    margin: 0 auto;
    width: 100%;
}
/* reduce space */
[data-section-id="6091547b96145d3ee02ae3e6"] {
    min-height: unset !important;
}
/* increase blog width */
.blog-item-inner-wrapper {
    width: 90% !important;
}
}

 

Thank you @tuanphan! 

The footer logo on tablet is centered but it is way too big. 

I'm still struggling to maintain the header logo centered on all devices.

I guess it has something to do with the hamburguer menu. 

Hi folks,

Anyone know how to force the hamburger menu on all screen sizes AND have it display to the right of the screen? 
N.B. the site has both the shopping cart and the members login enabled and also the social media links. 

Ideally, I'd like to end up with the following:

Logo on the left
Account Login | social links | shopping cart | Burger Menu on the right. 

The site is: https://jezrose.squarespace.com/home

password: flowerpower

Screenshot of the desired outcome attached. Unfortunately the code I am currently using means that resizing the browser window makes the burger icon cover the other header actions.

the current code I'm using is:

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}

/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

.burger-box {
  position: absolute;
  right: -88vw!important;
  top: -15px;
  margin-left:50px
}

On 1/5/2021 at 7:44 AM, 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

Hey, I know its been a couple of months. I just ran into the same issue "Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?"  Did you or anyone end up finding out how to fix it?

On 11/2/2021 at 5:22 AM, vgomez said:

Hey, I know its been a couple of months. I just ran into the same issue "Also, the old menu will flash when switching pages but only for a tiny bit, has anyone found the fix?"  Did you or anyone end up finding out how to fix it?

Can you share link to your site? We can check easier

@tuanphan I am trying to center logo after implementing the hamburger navigation as well. Thank you in advance!

Website is blank-supply.com

19 hours ago, blakelyhi said:

@tuanphan I am trying to center logo after implementing the hamburger navigation as well. Thank you in advance!

Website is blank-supply.com

Hi,

I need help. I'm also trying to center the logo after adding the burger menu and keep it on the left across all devices. https://ellipse-prism-hf54.squarespace.com pw moonmama

On 12/2/2021 at 4:03 AM, blakelyhi said:

@tuanphan I am trying to center logo after implementing the hamburger navigation as well. Thank you in advance!

Website is blank-supply.com

Don't remove any code

Add to Design > Custom CSS

/* Center title */
@media screen and (min-width:768px) {
.header-title-nav-wrapper {
    flex: 1 0 33.333%;
    width: 333.333%;
    text-align: center;
    flex-direction: column-reverse;
}
.header-burger {
    width: 33%;
    justify-content: flex-start !important;
}
.header-layout-branding-center .header-title {
    width: 100% !important;
}
.header-layout-branding-center .header-nav {
    display: none;
}
}

On 12/2/2021 at 10:57 AM, MoonMama said:

Hi,

I need help. I'm also trying to center the logo after adding the burger menu and keep it on the left across all devices. https://ellipse-prism-hf54.squarespace.com pw moonmama

Try above code

10 hours ago, tuanphan said:

Try above code

Hi, 

It didn't work, it makes the logo disappear on home page and when I go to another page it is way off center.

On 12/5/2021 at 1:39 AM, MoonMama said:

Hi, 

It didn't work, it makes the logo disappear on home page and when I go to another page it is way off center.

Don't remove any code in your current code & try above code

On 2/7/2020 at 3:50 PM, inside_the_square said:

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

Hi @inside_the_square this worked great! But now my shopping cart & social icon (which were on the right) have disappeared. I've tried different header layouts w/ same result. Can you advise? Thank you in advance!

13 hours ago, thedesigndaily said:

Hi @inside_the_square this worked great! But now my shopping cart & social icon (which were on the right) have disappeared. I've tried different header layouts w/ same result. Can you advise? Thank you in advance!

13 hours ago, thedesigndaily said:

Hi @inside_the_square this worked great! But now my shopping cart & social icon (which were on the right) have disappeared. I've tried different header layouts w/ same result. Can you advise? Thank you in advance!

Try changing this line

.header-nav, .header-actions {visibility:hidden!important}

to this

.header-nav {visibility:hidden!important}

12 hours ago, tuanphan said:

Thank you @tuanphan!

This piece did restore IG icon (on the left) and cart (on the right), but hamburger (left) disappeared.  Then it randomly came back w/ no IG icon showing on mobile, and no hamburger showing on desktop. Somewhere in there, I realized my "fixed header style" was set to "scroll back" instead of "basic." When I changed it to basic, it seemed to mess up everything. I also began getting "flashes" of my old navigation bar (centered under logo) when reloading the page.  I set it back to "scroll back" for now, but prefer "basic." Screenshots of everything attached, including current code being used (for this issue). I had had a piece of "hamburger code" in there previously (screenshot w/ black background); when I removed it, the icons came back, hamburger disappeared.  Can send contributor invite if that would help - what's a good email? Thank you again!

12 hours ago, tuanphan said:

Try changing this line

.header-nav, .header-actions {visibility:hidden!important}

to this

.header-nav {visibility:hidden!important}

 

15 hours ago, thedesigndaily said:

 

 

What is your site url?

13 hours ago, tuanphan said:

What is your site url?

@tuanphan

https://swordfish-toucan-ymsh.squarespace.com/config/settings

pass: blueangel

Thank you!

On 10/2/2022 at 3:43 AM, thedesigndaily said:

@tuanphan

https://swordfish-toucan-ymsh.squarespace.com/config/settings

pass: blueangel

Thank you!

Don't remove any code in your current code

Add this to top of Custom CSS box

.header-burger {
    display: block !important;
}

11 hours ago, tuanphan said:

Don't remove any code in your current code

Add this to top of Custom CSS box

.header-burger {
    display: block !important;
}

@tuanphan That worked!! Thank you so much! Very grateful!

 

On 10/3/2022 at 1:58 PM, thedesigndaily said:

 

@tuanphan Thanks again for your help! One potential problem - the overlay seems to have 'disappeared.' I seem to have nowhere to put / display menu items. Can you advise? Thank you! 

https://swordfish-toucan-ymsh.squarespace.com/config/

pass: blueangel

On 10/7/2022 at 6:45 AM, thedesigndaily said:

@tuanphan Thanks again for your help! One potential problem - the overlay seems to have 'disappeared.' I seem to have nowhere to put / display menu items. Can you advise? Thank you! 

https://swordfish-toucan-ymsh.squarespace.com/config/

pass: blueangel

 

You mean nav items should appear under logo?

11 hours ago, tuanphan said:

You mean nav items should appear under logo?

No, just looking for them to be under the "x" (when the hamburger is "open"). -- Like they would appear on mobile.