Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hiding the Hamburger menu from mobile


Simonu

Question

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

11 answers to this question

Recommended Posts

  • 1

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

Create an account or sign in to comment

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

×
×
  • Create New...