Jump to content

Hiding the Hamburger menu from mobile

Go to solution Solved by tuanphan,

Recommended Posts

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

 

Link to comment
  • Solution

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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>
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
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!!!

 

Link to comment
  • 2 months later...

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 8 months later...
  • 10 months later...
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!

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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}

 

 

 

Screen Shot 2022-05-08 at 07.48.02.png

Link to comment
  • 2 weeks later...
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

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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!

Link to comment
  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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!!!

 

Edited by mariascoy
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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;
    
    }
  }
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.