Hiding the Hamburger menu from mobile

Site URL: http://www.goedland.nl

Hi all!

I'm looking for a way to hide the mobile hambuger menu on a few specific pages of my website.. How do I best do this?

In my Custom CSS I've added the following code on the pages I needed to hide the main navigation & footer. In this I have succeeded, but the hamburger on mobile remains... Also is there an easier way to hide the main nav and footer than what I've used now? 

Thanks in advance!

#collection-5ea43d4d14bd4f0e74ba7e12 .Header-nav {
   display: none!important;
}

#collection-5ea43d4d14bd4f0e74ba7e12 .Footer {
   display: none!important;
}

#collection-5ea442813c53f87600534627 .Header-nav {
   display: none!important;
}

#collection-5ea442813c53f87600534627 .Footer {
   display: none!important;
}
#collection-5ea442b5f222897b8d590132 .Header-nav {
   display: none!important;
}

#collection-5ea442b5f222897b8d590132 .Footer {
   display: none!important;
}
#collection-5ea442c7a9fa910a7d7f11b2 .Header-nav {
   display: none!important;
}

#collection-5ea442c7a9fa910a7d7f11b2 .Footer {
   display: none!important;
}
#collection-5ea442c28315084d6dba2579 .Header-nav {
   display: none!important;
}

#collection-5ea442c28315084d6dba2579 .Footer {
   display: none!important;
}
#collection-5ea442cebe3c470ba754c787 .Header-nav {
   display: none!important;
}

#collection-5ea442cebe3c470ba754c787 .Footer {
   display: none!important;
}
#collection-5ea442bbb1653635c3af81f4 .Header-nav {
   display: none!important;
}

#collection-5ea442bbb1653635c3af81f4 .Footer {
   display: none!important;
}
#collection-5ea442af1d0fc8570b270cfe .Header-nav {
   display: none!important;
}

#collection-5ea442af1d0fc8570b270cfe .Footer {
   display: none!important;
}
#collection-5ea44341397d8072ce4662c6 .Header-nav {
   display: none!important;
}

#collection-5ea44341397d8072ce4662c6 .Footer {
   display: none!important;
}
#collection-5ea443362fec9937a4430f10 .Header-nav {
   display: none!important;
}

#collection-5ea443362fec9937a4430f10 .Footer {
   display: none!important;
}
#collection-5ea4433b00047c5743af480b .Header-nav {
   display: none!important;
}

#collection-5ea4433b00047c5743af480b .Footer {
   display: none!important;
}
#collection-5ea44325ee86164fffff2b3e .Header-nav {
   display: none!important;
}

#collection-5ea44325ee86164fffff2b3e .Footer {
   display: none!important;
}
#collection-5ea4432b397d8072ce466142 .Header-nav {
   display: none!important;
}

#collection-5ea4432b397d8072ce466142 .Footer {
   display: none!important;
}
#collection-5ea4433089503f2e48088ef6 .Header-nav {
   display: none!important;
}

#collection-5ea4433089503f2e48088ef6 .Footer {
   display: none!important;
}
#collection-5ea443878315084d6dba3c03 .Header-nav {
   display: none!important;
}

#collection-5ea443878315084d6dba3c03 .Footer {
   display: none!important;
}
#collection-5ea4437de702471b5a2a30f4 .Header-nav {
   display: none!important;
}

#collection-5ea4437de702471b5a2a30f4 .Footer {
   display: none!important;
}
#collection-5ea442a78315084d6dba22b4 .Header-nav {
   display: none!important;
}

#collection-5ea442a78315084d6dba22b4 .Footer {
   display: none!important;
}

Thank you so much, this worked! 

Hi @tuanphan!

I am using SquareSpace v7.1, and I have a business account. I am trying to hide the navigation menu in mobile and remove the footer. I'd like to do so because I'm using the "webview" option in an AppBuilder (so there is already another menu).

I've created separate duplicate pages within my site so I can keep the menu for mobile browsers, and then repoint the mobile app at the second pages. However, when I put the provided CSS above into Page Settings > Advanced > Header, nothing happens.

I'm curious if this has to be something different in v7.1?

Here's my site: www.creatingforjustice.org

Here's the site I am trying to remove it from: www.creatingforjustice.org/mobile-home

Here's the CSS I tried to inject in Page Settings:

<style>
  /* Hide burger */
  button.Mobile-bar-menu {
    visibility: hidden;
}
  /* Hide mobile header */
  .Mobile-bar.Mobile-bar--top {
    display: none;
}
  /* hide footer */
  footer.Footer {
    display: none !important;
}
</style>

13 hours ago, CreatingForJustice said:

Hi @tuanphan!

I am using SquareSpace v7.1, and I have a business account. I am trying to hide the navigation menu in mobile and remove the footer. I'd like to do so because I'm using the "webview" option in an AppBuilder (so there is already another menu).

I've created separate duplicate pages within my site so I can keep the menu for mobile browsers, and then repoint the mobile app at the second pages. However, when I put the provided CSS above into Page Settings > Advanced > Header, nothing happens.

I'm curious if this has to be something different in v7.1?

Here's my site: www.creatingforjustice.org

Here's the site I am trying to remove it from: www.creatingforjustice.org/mobile-home

Here's the CSS I tried to inject in Page Settings:

<style>
  /* Hide burger */
  button.Mobile-bar-menu {
    visibility: hidden;
}
  /* Hide mobile header */
  .Mobile-bar.Mobile-bar--top {
    display: none;
}
  /* hide footer */
  footer.Footer {
    display: none !important;
}
</style>

Hi

SS 7.1 needs different code, use this code (Page Settings . Advanced . Header)

<style>
  @media screen and (max-width:767px) {
  /* hide burger */
  .burger-box {
    visibility: hidden;
}
  /* hide footer */
  footer.sections {
    display: none;
}
  }
</style>

That worked! Thank you!

Hi @tuanphan, one more question, can I easily hide the top left button that returns a user to home?

See below:

4 hours ago, CreatingForJustice said:

Hi @tuanphan, one more question, can I easily hide the top left button that returns a user to home?

See below:

You mean hide logo?

<style>
  a#site-title {
    visibility: hidden;
}
</style>

or if you want to disable logo link only, use this

<style>
  a#site-title {
    pointer-events: none;
}
</style>

On 4/25/2020 at 11:11 PM, tuanphan said:

If you use Business Plan, add this code to Page Settings > Advanced > Header

<style>
  /* Hide burger */
  button.Mobile-bar-menu {
    visibility: hidden;
}
  /* Hide mobile header */
  .Mobile-bar.Mobile-bar--top {
    display: none;
}
  /* hide footer */
  footer.Footer {
    display: none !important;
}
</style>

If you use Personal Plan, add this to Home > Design > Custom CSS. 

#collection-5ea442a78315084d6dba22b4, #collection-5ea4433089503f2e48088ef6 {
    /* Hide burger */
      button.Mobile-bar-menu {
        visibility: hidden;
    }
      /* Hide mobile header */
      .Mobile-bar.Mobile-bar--top {
        display: none;
    }
      /* hide footer */
      footer.Footer {
        display: none !important;
    }
}

That worked for me. Thank you so much for your help!!!

Hi,

I'm using personal account and copied one above but it's still visible.

https://www.we-ar.io/

Remove the CSS you entered previously. Add the following.

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-display-mobile .header-burger {
  
    display: none;
    
    }
  }

Let us know how it goes.

creedon, that works beautifully!! Thank you 

On 10/19/2020 at 11:32 PM, creedon said:

Remove the CSS you entered previously. Add the following.

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-display-mobile .header-burger {
  
    display: none;
    
    }
  }

Let us know how it goes.

I am forcing the mobile menu on desktop. I would like to hide the burger icon on one page on desktop only, how can I do that?  Just the burger icon, not the header. Thanks!

36 minutes ago, HunterD said:

I would like to hide the burger icon on one page on desktop only

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

14 hours ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks! I actually found the code on another post. But I do have another issue.  I am trying to set the font weight for just one text block. With Squarespace font settings, I can set the font weight up to 900. But if I use the following code, it works only up to 600, what am I doing wrong? 

The text I am using is the "hello".

 https://dinosaur-dodecahedron-9p5z.squarespace.com - PW: hello123 -  Thanks!

#block-yui_3_17_2_1_1652006796342_4233 h1
{font-weight: 600 !important}

On 4/25/2020 at 3:11 PM, tuanphan said:

If you use Business Plan, add this code to Page Settings > Advanced > Header

<style>
  /* Hide burger */
  button.Mobile-bar-menu {
    visibility: hidden;
}
  /* Hide mobile header */
  .Mobile-bar.Mobile-bar--top {
    display: none;
}
  /* hide footer */
  footer.Footer {
    display: none !important;
}
</style>

If you use Personal Plan, add this to Home > Design > Custom CSS. 

#collection-5ea442a78315084d6dba22b4, #collection-5ea4433089503f2e48088ef6 {
    /* Hide burger */
      button.Mobile-bar-menu {
        visibility: hidden;
    }
      /* Hide mobile header */
      .Mobile-bar.Mobile-bar--top {
        display: none;
    }
      /* hide footer */
      footer.Footer {
        display: none !important;
    }
}

 

I have a business account and added this to the header and I can still see the menu at the top in mobile. vessel.media

1 hour ago, xhellerx said:

I can still see the menu at the top in mobile.

The code didn't work because it is for a different version/template of SS.

Replace the code you installed with the following.

<style>

  @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), 
  screen and ( max-width : 799px ) {
  
    .header-display-mobile {
    
      display : none;
      
      }
      
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

6 minutes ago, creedon said:

The code didn't work because it is for a different version/template of SS.

Replace the code you installed with the following.

<style>

  @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), 
  screen and ( max-width : 799px ) {
  
    .header-display-mobile {
    
      display : none;
      
      }
      
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

YES! Thank you!

Hi @creedon similar to the original post I would like to get rid of the hamburger style menu on mobile and keep the desktop menu layout (on all my pages).

How would I do this? I am on a business plan.

My website is: https://www.david-wright.com/

Password: abc123

Thanks for your help!

On 5/30/2022 at 12:50 AM, dw1080 said:

Hi @creedon similar to the original post I would like to get rid of the hamburger style menu on mobile and keep the desktop menu layout (on all my pages).

How would I do this? I am on a business plan.

My website is: https://www.david-wright.com/

Password: abc123

Thanks for your help!

Add to Design > Custom CSS

/* Desktop nav on mobile */
@media screen and (max-width:750px) {
#header #topNav {
    display: flex;
    justify-content: center !important;
    align-items: center;
    float: none !important;
}
div#mobileMenuLink {
    display: none;
}
}

On 10/19/2020 at 7:32 PM, creedon said:

Remove the CSS you entered previously. Add the following.

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-display-mobile .header-burger {
  
    display: none;
    
    }
  }

Let us know how it goes.

Hi @creedon I tried this on a personal website I am making and it does take the menu icon away but it moves the logo from the center slightly to the left (on mobile). Is there any way that I can keep it centered? Thanks!!!

20 minutes ago, mariascoy said:

it moves the logo from the center slightly to the left (on mobile). Is there any way that I can keep it centered?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks you so much!

https://sepia-radish-dnt7.squarespace.com

Pass: doritos

Right now it has the CSS but if you see in the mobile version, the logo "ORUGA" is slightly to the left instead of centered. 

Thanks again!!!

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-display-mobile .header-burger {
  
    display: none;
    
    }
  }

3 hours ago, mariascoy said:

Thanks you so much!

https://sepia-radish-dnt7.squarespace.com

Pass: doritos

Right now it has the CSS but if you see in the mobile version, the logo "ORUGA" is slightly to the left instead of centered. 

Thanks again!!!

 

 

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-display-mobile .header-burger {
  
    display: none;
    
    }
  }

Don't remove any code in your current code. Add to Design > Custom CSS

@media screen and (max-width:991px) {
.header-title-logo {
    padding-right: 0 !important;
}
}

Wow! Thanks @tuanphan and @creedon

🙂