CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ItsPronounced
ItsPronounced

Reputation: 5463

Bootstrap navbar customization without losing functionality

I'm converting an existing site to responsive and I've gotten to the navigation bar. On the old site has a very simple navigation bar with some styling on it. Just a <ul> with <li> for each item and a nested <ul> for a dropdown. It looks like this: enter image description here

<ul id="nav">
    <li><a href="#">Home</a></li>
</ul>

Entire fiddle here: https://jsfiddle.net/t3haykzd/

I want to make a responsive navbar that looks exactly like this if possible. From what I understand it is bad practice to edit the bootstrap source directly. Looking at bootstraps navbar, I notice it has 2 elements, the header and then the menu itself which is an unordered list.

Is there a simple way to incorporate my current style into this navbar while making sure it's responsive?

Upvotes: 1

Views: 518

Answers (2)

rashfmnb
rashfmnb

Reputation: 10538

Use the following link to do this might be helpful to you.

This one is bootstrap own to customize the bootstrap components look and feel.

Upvotes: 1

vanburen
vanburen

Reputation: 21663

Here's an example that should get you started. The important thing to keep in mind (at least with this example) is the use of media queries to build the navigation in a fashion similar to your current one so you don't disturb the mobile functionality @ under 768px. The vast majority is simple styling.

body {
  font-family: Arial, Helvetica, sans-serif;
}
.navbar.navbar-default {
  background-color: #fff;
  border: none;
  border-bottom: 6px solid #2A92C2;
}
.navbar.navbar-default .navbar-nav > li > a {
  color: #002B5C;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #2A92C2;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:focus,
.navbar.navbar-default .navbar-nav > .active > a:hover {
  background-color: #2A92C2;
  color: #FFF;
}
.navbar.navbar-default .navbar-toggle .icon-bar,
.navbar.navbar-default .navbar-toggle .icon-bar:hover {
  background-color: #2A92C2;
  border: none;
}
.navbar.navbar-default .navbar-toggle,
.navbar.navbar-default .navbar-toggle:focus,
.navbar.navbar-default .navbar-toggle:hover {
  background: none;
  border: none;
}
/*Distribute Links*/

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-default .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-default .navbar-nav > li > a {
    text-align: center;
  }
  .navbar.navbar-default .navbar-header .navbar-brand {
    display: none;
  }
  .navbar.navbar-default > .container-fluid {
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/*Mobile Brand*/

@media (max-width: 767px) {
  .navbar.navbar-default .navbar-header .navbar-brand {
    color: #2A92C2;
    font-size: 28px;
    font-weight: bold;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav1" 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><a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-nav1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Products</a>

        </li>
        <li><a href="#">Services</a>

        </li>
        <li><a href="#">Testimonials</a>

        </li>
        <li><a href="#">News</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>

  </div>
</nav>
<div class="container">
  <div class="alert alert-info">
    <p>Sup</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 2

Related Questions