Twitter bootstrap nav-bar with isotope filtering

I’m having a hard time to implementing the twitter bootstrap nav-bar with the isotope filtering option. I gave the navbar a custom style but it doesnt work + the links show up next to eachother without any padding. Also in the dropdown menu they show up next to eachother instead of under eachother. Does anyone knows whats causing this? Working example

header.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
    <title><?php bloginfo('title') ?></title>
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

  <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
          <ul class="nav navbar-nav navbar-left" id="filters">
    <a href="#" data-filter="*" class="selected">All projects</a>
 <?php 
 $terms = get_terms("category"); // get all categories, but you can use any taxonomy
 $count = count($terms); //How many are they?
 if ( $count > 0 ){  //If there are more than 0 terms
 foreach ( $terms as $term ) {  //for each term:
 echo "<a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a>n";
 //create a list item with the current term slug for sorting, and name for label
 }
 } 
 ?>
</ul>



      </ul>
    </div>
  </div>
    </nav>

custom.css

.navbar-custom {
  background-color: white;
  border-color: white;
  font-size:18px;
  line-height: 20px;

}
.navbar-custom .navbar-brand {
  color: #000;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #000;
}
.navbar-custom .navbar-text {
  color: #000;
}
.navbar-custom .navbar-nav > li > a {
  color: #000;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #000;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #000;
  background-color: white;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  color: #000;
  background-color: white;
}
.navbar-custom .navbar-toggle {
  border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: white;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #000;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #000;
}
.navbar-custom .navbar-link {
  color: #000;
}
.navbar-custom .navbar-link:hover {
  color: #000;
}
@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #000;
    background-color: white;
  }

}
.navbar-brand {
  padding: 0px;
  font-size: 18px;
  padding-left: 15px;
  padding-top: 15px;
  line-height: 20px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
    line-height: 20px;
}

.container {
width:100%;
padding-left: 15px;
padding-right: 15px;
}

.container-moving {
padding-top: 65px;
}

Read more here: Twitter bootstrap nav-bar with isotope filtering

Leave a Reply

Your email address will not be published. Required fields are marked *