Disclaimer: please don't use this for production as this is for educational and development purpose only

Introduction

Foundation zurb is a cool scss framework for building your site. But it lack the ability to create a minimized toolbar like bootstrap, today i'm gonna show you how to create top bar like bootstrap navigation bar.

Prequisites

install nodejs for this i recommend using node v11.15.0
for most of this tutorial i will use linux command line. You can use wsl in windows for the equivalent of linux command line or git scm.

Step 1 - Bootstraping the angular app to use foundation zurb

follow this step below to create a bootstraping angularjs app that has scss foundation framework

npm install -g foundation-cli
foundation new --framework sites --template basic
npm install angular --save

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">

add this line after app.css in src/layouts/default.html

To run the server

foundation watch

the browser will opened at http://localhost:8000

Step 2 - Let's add the Top Bar

go to src/pages/index.html ,remove all the html and change it will below

<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
    <div class="title-bar-title">Menu</div>
  </div>

  <div class="top-bar" id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text">Site Title</li>
        <li class="has-submenu">
          <a href="#0">One</a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#0">One</a></li>
            <li><a href="#0">Two</a></li>
            <li><a href="#0">Three</a></li>
          </ul>
        </li>
        <li><a href="#0">Two</a></li>
        <li><a href="#0">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>

if success you can will get something like this

when minimized into mobile you will get something like this

we want the top bar to be something like bootstrap navigation like this one

with a burger bar on the right and menu on the bottom

let's change the code in src/pages/index.html

 <div ng-app="a" ng-controller="b">
      <nav class="top-bar top-bar-red">

      <div class="top-bar-title">
        <h1>
          <a href="/">
            <img width="100" height="100" src="{{root}}assets/img/a.jpg" alt="Logo">
          </a>
        </h1>
      </div>
      <div class="hide-for-large sidebar-right-menu" ng-click="toggleMenu()"><i class="fas \{{menuChange}}"></i></div>

      <div class="top-bar-right">

        <ul class="menu show-for-large">
          <li>
            <a href="/">Home</a>
          </li>

          <li>
            <a href="/" class="btn-nav-icon">
              <i class="fas fa-shopping-cart"></i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="dropdown-menu-bar hide-for-large">
      <ul class="vertical menu">

        <li>
          <a href="/about.html">Home</a>
        </li>

        <li>
          <a href="/" class="btn-nav-icon">
            <i class="fas fa-shopping-cart"></i>
          </a>
        </li>
      </ul>
    </div>

  </div>

now let's add some css open file src/assets/scss/app.scss and add this line on the bottom of the file

.top-bar-red{
    background: #e43338 !important;

  }
@media only screen and (max-width: 414px) {
    .dropdown-menu-bar{
      background: #e43338 !important;
      display: none;
    }
    .dropdown-menu-bar > ul > li > a{
       color: white;
    }
    .card-maker {
      position: relative !important;
      padding-top:0px;
    }
    .card-editor {
      margin-left: 14px !important;
      padding-bottom: 0;
      width: 27.25em !important;
      font-size: 0.84em;
    }
    .card-container{
      width: 19.5em !important;

    }
    h2, .hero h1 {
      font-size: 14px;
    }
    .button.btn-reset {
      margin-right: 14px !important;
    }
    .sidebar-right {
      margin-top:0px !important;
    }
    .sidebar-right-menu{
      float:right;
      color:white;
      margin-right:20px;
      font-size:20px;
    }
  }
  @media only screen and (max-width: 600px) {
    .dropdown-menu-bar{
      background: #e43338 !important;
      display: none;
    }
    .dropdown-menu-bar > ul > li > a{
      color: white;
    }
     .card-maker {
      position: relative !important;
      height: 18em;
       padding-top:0px;
    }

  }
  @media only screen and (max-width: 768px) {
    .dropdown-menu-bar{
      background: #e43338 !important;
      display: none;
    }
    .dropdown-menu-bar > ul > li > a{
      color: white;
    }
    .card-maker {
      position: relative !important;
      padding-top:0px;
       }
    .sidebar-right-menu{
      float:right;
      color:white;
      margin-right:20px;
      font-size:20px;
    }
  }
  @media only screen and (max-width: 1024px) {
    .hide-for-ipadpro{
      display:none !important;
      float:left !important;
    }
    .show-for-ipadpro{
      display:block !important;
      float:left !important;
    }
  }

now add the js part open file src/assets/js/app.js

import angular from 'angular'

var app = angular.module('a', []);
app.controller('b', function($scope) {
    $scope.menuChange='fa-bars';
    $scope.toggleMenu=function(){
      if($scope.menuChange==='fa-bars'){
        $scope.menuChange='fa-times';
        document.querySelector('.dropdown-menu-bar').style.display='block';
      }else{
        $scope.menuChange='fa-bars';
        document.querySelector('.dropdown-menu-bar').style.display='none';
      }
    };
});

now save the file and you will get something like this

this is different design than bootstrap one but i think will get you an idea later how to create bootstrap navigation bar using top bar foundation zurb

gakpenting / zurb-foundation-topbar

create a bootstrap like zurb foundation topbar

ZURB Template

i create an article explaining about this here https://dev.to/spiritbro1/how-to-make-bootstrap-like-top-bar-for-foundation-zurb-4g34

Please open all issues with this template on the main Foundation for Sites repo.

This is the official ZURB Template for use with Foundation for Sites. We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:

Handlebars HTML templates with Panini
Sass compilation and prefixing
JavaScript module bundling with webpack
Built-in BrowserSync server
For production builds
- CSS compression
- JavaScript module bundling with webpack
- Image compression

Installation

To use this template, your computer needs:

NodeJS (Version 6 or greater recommended, tested with 6.11.4 and 8.12.0)
Git

This template can be installed with the Foundation CLI, or downloaded and set up manually.

Using the CLI

Install the Foundation CLI with this command:

npm install foundation-cli --global

Use this command to set up a blank Foundation for Sites project…

View on GitHub

Additional Resources

https://glennstovall.com/yeoman-angularront-end-setup/ [yeoman angular foundation generator]
https://stackoverflow.com/questions/19752937/compassserver-not-found-when-running-grunt-server [install compass ruby]
https://get.foundation/sites/docs/top-bar.html [top bar]
https://unsplash.com/photos/CoNsEK5iHug [logo image]
https://getbootstrap.com/docs/4.5/examples/carousel/ [burger bar]

Blog

Make Bootstrap like Top Bar for Foundation Zurb

spiritupbro