CODEWITHSUNDEEP
menuzurb-foundation
Will Tang
Will Tang

Reputation: 31

How to disable collapsing top bar menu in zurb foundation?

Is it possible to not have the top bar in Foundation to collapse to Menu and the three lines? We don't really need this feature but not sure how to disable the collapse.

Will this require modifying the foundation.topbar.js?

Upvotes: 3

Views: 9309

Answers (4)

TrevTheDev
TrevTheDev

Reputation: 2737

Things have changed in foundation 5.1.1 and this worked for me in the css: changed

@media only screen and (min-width: 40.063em) {
  .top-bar {

to

@media only screen and (min-width: 4.063em) {
  .top-bar {

Upvotes: 2

Arvid
Arvid

Reputation: 386

If you're using Foundation via sass, there's an even better way to go about it. Just open up the _settings.scss file and find this line:

// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout

Uncomment it and change the value to 0, or whatever breaking point you would like to use.

Upvotes: 5

Lee Honeycutt
Lee Honeycutt

Reputation: 11

If you're working directly with the Foundation CSS, you can override the mobile mode of the .top-bar menu by changing the breakpoints in the following lines of CSS to 0em:

.top-bar-js-breakpoint {
  width: 58.75em !important;
  visibility: hidden; }

.js-generated {
  display: block; }

@media only screen and (min-width: 58.75em) {
----- numerous lines below -------

However, if you're working with a child theme in WordPress or another CMS, you have to copy all of the .top-bar related selectors below the actual media query and paste them into your child CSS, then change the breakpoints to 0. Works like a charm.

Upvotes: 1

tnog
tnog

Reputation: 420

Yes, it's possible to not show the default nav menu for small-screens with the menu toggle icon without modifying any js files. Foundation 4 uses a series of visibility classes to show and hide elements on the screen along with media queries.

As an example here's the main navigation for Zurb's demo site linked above:

<nav class="top-bar hide-for-small" style="">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="/">Foundation</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>


<section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider"></li>
      <li class=""><a href="/grid.php">Features</a></li>
      <li class="divider"></li>
      <li class=""><a href="/templates.php">Add-ons</a></li>
      <li class="divider"></li>
      <li class=""><a href="/case-jacquelinewest.php">Case Studies</a></li>
      <li class="divider"></li>
      <li class=""><a href="/docs/">Docs</a></li>
      <li class="divider"></li>
      <li class=""><a href="/training.php">Training</a></li>
      <li class="divider"></li>
      <li class="has-form">
        <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
      </li>
    </ul>
  </section></nav>

As you can see it's simple to remove the .menu-icon class or even the li; if you look at line 2816 of docs.css you can see that a minimum screen breakpoint (58.75em) is set for the .top-bar class:

@media only screen and (min-width: 58.75em) {
.top-bar {
background: #111111;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
  content: " ";
  display: table; }
.top-bar:after {
  clear: both; }
.top-bar .toggle-topbar {
  display: none; }
.top-bar .title-area {
  float: left; }
.top-bar .name h1 a {
  width: auto; }
...

Since F4 is built with a mobile first design approach by default the menu is set for small screens. At a minimum width of 58.75 em, the breakpoint is set to modify the default .top-bar view for larger screens so that the menu ul is displayed inline and the child li are floated left.

You can override the .top-bar so that this is the default view by overriding the corresponding lines of css/scss or even the global variables.

Upvotes: 1

Related Questions