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

Hiding the Hamburger menu from mobile


Simonu
Go to solution Solved by tuanphan,

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 */

Posted Images

10 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 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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!!!

 

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

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

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