DEV Community

spiritupbro
spiritupbro

Posted on • Updated on

Make Bootstrap like Top Bar for Foundation Zurb

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

  1. install nodejs for this i recommend using node v11.15.0

  2. 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">
Enter fullscreen mode Exit fullscreen mode

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

To run the server

foundation watch
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

if success you can will get something like this

a

when minimized into mobile you will get something like this

a

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

a 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> 

Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
Enter fullscreen mode Exit fullscreen mode

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';
      }
    };
});
Enter fullscreen mode Exit fullscreen mode

now save the file and you will get something like this
a

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

GitHub logo gakpenting / zurb-foundation-topbar

create a bootstrap like zurb foundation topbar

ZURB Template

donatepaypal

Open in Cloud Shell

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

devDependency Status

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
Enter fullscreen mode Exit fullscreen mode

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




Additional Resources

Top comments (0)