Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp

carolineschnapp/instructions.md Secret

Last active November 21, 2020 12:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carolineschnapp/bdf058fa94ecfab029d3 to your computer and use it in GitHub Desktop.
Save carolineschnapp/bdf058fa94ecfab029d3 to your computer and use it in GitHub Desktop.
Download ZIP
Disable the 'hide behind hamburger icon' feature for the navigation when it contains too many links to fit on one line. #Brooklyn
Raw
instructions.md

Problem

You want to disable that “hide-behind-hamburger-icon” behavior in the large view:

Alt text

Solution

You can either reduce the amount of links in the Main Menu, or...

  1. Comment out theme.fitNav(); in theme.js.liquid. Direct link.
  2. Add .site-nav { white-space: normal; opacity: 1; } at the VERY BOTTOM of theme.scss.liquid. Direct link.
Raw
theme.js.liquid
//theme.fitNav();
Raw
theme.scss.liquid
.site-nav {
white-space: normal;
opacity: 1;
}
@Legwon
Copy link

Legwon commented Dec 14, 2019

Worked PERFECTLY!!!
NOTE!! there is MORE THAN ONE INSTANCE of theme.fitNav(); in theme.js.liquid

@onasipim
Copy link

onasipim commented Nov 21, 2020 •
edited

Still works great with new Brooklyn version.

I had to add as well to theme.scss.liquid for showing the hamburger menu on mobile
.site-nav, .site-nav--open { opacity: 1; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment