Make Bootstrap like Top Bar for Foundation Zurb
Tags: angular, css, javascript, blogspiritbro1english
Published: 2020-06-28 15:11:13

_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

```html
 <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

```html
<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

![a](https://imgur.com/download/dNdY3r3)

when minimized into mobile you will get something like this

![a](https://imgur.com/download/asLXqAa)

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

![a](https://imgur.com/download/jIJXhwp) with a burger bar on the right and menu on the bottom

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

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

```css
.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

```javascript
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
![a](https://imgur.com/download/al48oAJ)

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 https://github.com/catflip/zurb-foundation-topbar %}


### 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]