Jump to content

Pacific: How can I disable the Hamburger (Mobile Nav) from toggling on?

Recommended Posts

  • Replies 14
  • Created
  • Last Reply

So I've been able to disable the desktop hamburger by turning off mobile styles in the settings panel and adding the following to my custom CSS:


// Disable hamburger -- mobile styles disabled and headerNav < 768px on desktop
@media only screen and (max-width: 768px) {
   #header #headerNav {
       display: inline-block !important;
       z-index: 9999;
 }
}

.mobile-nav-toggle-label {
   display: none !important;
}

@media only screen and (min-width: 769px) {
   html:not(.touch-styles) body:not(.always-use-overlay-nav) {
       .mobile-nav-toggle-label {
           display: none;
       }
   #overlayNav {
       display: none;
   }
 }
}

Link to comment
  • 9 months later...

I was able to get this to work in Pacific. This will hide the hamburger and display the nav. Keep in mind though that this does not take into account the Scrolling Nav on mobile. If you want that functionality, you'll need to make some more adjustments.


/*Hide Hamburger, Show Desktop*/
.mobile-nav-toggle-label {
 display: none !important;
}

@media only screen and (max-width: 768px) {
#header #headerNav {
display: inline !important;}
}

Link to comment
  • 1 month later...

I've found a better solution. This code removes touch styles from the theme, and allows you to keep the hamburger nav for mobile. You want to use it as a site-wide code injection (SETTINGS > ADVANCED > CODE INJECTION) ... copy and paste this into the box for the footer.


<script>$(".touch-styles").removeClass("touch-styles");</script>

Link to comment

I use Pacific on a client site and just tried the script amybillmckenzie provided but it doesn't seem to work. Should it be in the header? Anyone have other ideas?

I want the same behavior: truly mobile devices (smartphones and small tablets) should get the hamburger, but my client's 25-inch Windows 8 machine should absolutely not see it (both IE and Chrome get the hamburger). Personally, I think this is a glaring bug or shortsighted design on Squarespace's part that they need to fix.

Link to comment
  • 6 months later...

The previously mentioned snippet works but you have to load jQuery first. Just paste this entire code into the head of your website and you will be all set.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
 $( document ).ready(function() {
   $(".touch-styles").removeClass("touch-styles");
   });
</script>

This loads the jQuery library from Google then runs the script once the page is loaded.To find where to paste it go to "Settings" > under website, clicked "Advanced" > "Code Injection" and put it in the header section.

----EDIT----

The code above removes the hamburger on touchscreen computers but brings it back on smaller screens. If you want the hamburger removed completely, insert the above code into your head and insert this code into your custom css:


@media screen and (max-width: 768px) {
#header #headerNav {
   display: inline-block !important;
}

#mainNavigation div {
   margin: 0 25px !important;
}
}

.mobile-nav-toggle-label {
   display: none !important;
}




Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

Link to comment
  • 6 months later...

This worked best for me. I used Hayden, but I imagine this will work for other templates. Go to DESIGN, CUSTOM CSS and add the following:


/** hide nav menu icon on mobile **/
.top-bar, .middle-bar, .bottom-bar {
 display:none !important;
}
label.mobile-nav-toggle-label.fixed-nav-toggle-label {
   display:none !important;
}




Link to comment
  • 3 months later...

I used the following CSS to remove several items from my navigation bar, so that only 4 pages are showing, but it apparently doesn't apply to the mobile hamburger (MH) nav:


*#mainNavigation > div:nth-child(1) > a {
  display: none;
}*

When I use your hide MH CSS above, it works but I lose "show the nav bar when scrolling" option while on mobile.

Any idea how to either make the MH mirror my hidden nav-bar changes or to enable "show nav bar when scrolling" on mobile?

Either solution is fine by me but I just can't quite get either to work as I want.

Link to comment
  • 2 months later...

Hi!

I was able to remove the hamburger menu but I can't figure out how to force the text links to always show. Anyone know?

Using this:


/*Hide Hamburger, Show Desktop*/
.mobile-nav-toggle-label {
  display: none !important;
}


@media only screen and (max-width: 768px) {
#header #headerNav {
display: inline !important;}
}





Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.