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

Hiding the Hamburger menu from mobile

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

 

Share this post


Link to post

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 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>

Share this post


Link to post
  • 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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 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!!!

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...