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

I’d like the regular site navigation links to remain at all times. I have disabled mobile styles and forced a minimum site width of 1000px but the Hamburger still persists on smaller screen sizes.

I'm also wondering how to do this. Can anyone help?

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

This is great thanks! However this does hide the mobile nav but then doesn't show the regular one?

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

Thanks for sharing your solution! However, when I tried this, it still only hides the mobile navigation and shows the logo on a blank nav bar. For me, it didn't show the navigation links.

Have you added other custom CSS to your site already? If you provide a link to the site, I'll take a look. Also, Make sure you have disabled "Always Use Overlay Nav" in the Style Editor.

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>

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.

I haven't been able to fix it such that you get the hamburger on mobile only - but the code above does display the full navigation on touch devices. I should have noted that you need to disable mobile styles under "Advanced" in the Design section.

This didn't work for me. Any advice?

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

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

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.

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