Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
weston

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

Question

14 answers to this question

Recommended Posts

  • 1

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

Edited by weston

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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>

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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




Edited by Mark.Hook
Initial Revision

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

Share this post


Link to post
  • 0

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




Edited by joncasey5
Initial Revision

Share this post


Link to post
  • 0

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.

Edited by KyleHollinger
Initial Revision

Share this post


Link to post
  • 0

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





Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...