CODEWITHSUNDEEP
zurb-foundation
meow
meow

Reputation: 28164

Top nav in foundation zurb - showing the main menu even when on mobile

When the user is on the mobile, I would like the menu to appear as well, and not be hidden. But no matter how I tweak the show-on-small options, it does not show up.

How it currently appears on a small screen

enter image description here

How I would like it to appear. (with the menu icon)

enter image description here

I would make sure that it is short enough such that it fits, but I am rather confused about how to make it work.

Thanks a lot!

Upvotes: 1

Views: 1090

Answers (2)

Alex K
Alex K

Reputation: 15828

Adding to chrisjsherm's answer, I ended up doing this. In the default app.scss file, right after the settings file is imported, override the $topbar-breakpoint variable.

// Global Foundation Settings
@import "settings";

// Override settings for this project only
$topbar-breakpoint: 1px;

Upvotes: 1

chrisjsherm
chrisjsherm

Reputation: 1329

If you are using SASS, open the _top-bar.scss file, find the $topbar-breakpoint variable, and set the pixel value to 1px. This will make the breakpoint that causes the foundation.topbar.js to toggle to the mobile style too small to occur.

If you are using regular css files, search for the .top-bar-js-breakpoint style and change the width to 1px there.

Upvotes: 2

Related Questions