Create Beautiful Custom Horizontal Menu with Bootstrap 3

I’m still having fun to use the bootstrap framework for build responsive website. I will share my custom horizontal menu. My horizontal menu has 2 navbar in the top. On the top navigation bar consists of brand image, date and name of the user with a dropdown menu. The second navbar we can set a link page or another menu. Second navbar will collapse when browser resolution change into mobile resolution. lets see my horizontal menu preview below

preview create horizontal menu with bootstrap 3 - part 1

preview create horizontal menu with bootstrap 3 ,mobile display

preview create horizontal menu with bootstrap 3 - toggle menu colapse

Okay, here’s the script how to create a horizontal menu with bootstrap 3 and custom css

1. Make sure you have downloaded the bootstrap framework 3 here
2. Make sure you have downloaded the font awesome here
3. Create index.php as php file and copy the script below

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>beatiful custom horizontal menu with bootstrap 3 </title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <div id="main-header">
    <div class="container-fluid header-top">
      <div class="row">
        <div class="col-md-4 col-sm-3 col-xs-12">
         
         <div class="navbar-header navbar-default ">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="" href="#"><img class="img-responsive image_brand" src="image/sgtlogo.png"></a>
        </div>
      </div> <!-- col-md-4 col-xs-12 -->
      <div class="col-md-8 col-sm-9 col-xs-12 xs_color">
        <div class="navbar-header navbar-kanan " >
          <ul class="nav nav-pills ">
            <li class="grey"><a href="#">
                <span class="round_text green_date"><?php echo date('d')?></span>
                <span class="round_text red_date"><?php echo date('m')?></span>
                <span class="round_text blue_date"><?php echo date('y')?></span>
              </a></li>
           <li class="light-blue">
            <a data-toggle="dropdown" href="#" class="dropdown-toggle">
              <img class="nav-user-photo" src="image/twitter.png" style="width:36px; heigth:36px;" alt="Jason's Photo">
              <span class="user-info hidden-xs">
                Sigit Prasetya Nugroho
              </span>
              <i class="ace-icon fa fa-caret-down"></i>
            </a>
            <ul class="dropdown-menu xs-menu-left"  role="menu">
              
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div> <!-- col-md-8 col-xs-12 -->
  </div>
</div>
<div class="container-fluid header-bottom">
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-kiri" id="bottom_menu">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#"><i class="fa fa-users"></i> Customers</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-tasks"></i> 
            Items <span class="caret"></span></a>
          <ul class="dropdown-menu menu-top-front" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="fa fa-file-text-o"></i> Reports</a></li>
        <li><a href="#"><i class="fa fa-cart-plus"></i> Sales</a></li>
        <li><a href="#"><i class="fa fa-sliders"></i> Config</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- container fluid 2 -->
</div><!-- main header -->
<div id="wrapper">
  <!-- Sidebar -->
  <div id="sidebar-wrapper"> 
  </div><!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper">

  </div><!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

4. Create style.css as css file and copy my custom css below

.navbar-default{
  background-color:white;
  height:40px;
}
.btn-sidebar{
  margin-top:3px;
  margin-left: -10px;
   background-color:#43adb9;

}
.image_brand{
  padding-top: 5px;
}
.btn-sidebar:hover{
  margin-top:3px;
  margin-left: -10px;
  opacity: 0.8;
}
.xs-menu-left{
  right: 0; 
  left: auto;
}
#main-header{
  background-color: white;
  border-bottom: 1px solid grey;
}
.header-top{
  border-bottom: 0px solid grey;
}
.header-bottom{
    background-color: white;
}
.navbar-kanan{
  float:right;
}
.navbar-kiri{
  margin-left: -25px;
}
.navbar-date{
  font-size: 20px;
  vertical-align: middle;
  line-height: 1px;
}
.nav > li:hover {
  opacity: 0.8;
}
#bottom_menu li> a{
  margin-right: 3px;
  color:#ad3434;
}
#bottom_menu li> a:hover{
  background-color: #fa7c00!important;
  color: white;

}
.round_text{
  border-radius: 100%;
  border: 1px solid #FFF;
  max-width: 50px;
  padding: 5px;
  margin-right: 3px;
}
.red_date{
  background-color:  #b74635!important;
}
.blue_date{
  background-color:  #6fb3e0!important;
}
.green_date{
  background-color: #87b87f!important;
}
.grey > a{
  background-color:#4b4b4b!important;;
  color: white;
  -webkit-border-radius: 0px!important;
  -moz-border-radius: 0px!important;
  border-radius: 0px!important;
}
.purple  > a{
  background-color: #762c59!important;
  color: white!important;
  -webkit-border-radius: 0px!important;
  -moz-border-radius: 0px!important;
  border-radius: 0px!important;
}
.green > a{
  background-color: #2c7659!important;
  color: white!important;;
  -webkit-border-radius: 0px!important;
  -moz-border-radius: 0px!important;
  border-radius: 0px!important;

}
.red > a{
  background-color:#763930; 
  color: white;
    -webkit-border-radius: 0px!important;
  -moz-border-radius: 0px!important;
  border-radius: 0px!important;

}
.light-blue > a {
  background-color:#fa7c00!important;
  color: white;
    -webkit-border-radius: 0px!important;
  -moz-border-radius: 0px!important;
  border-radius: 0px!important;

}
.user-info{
  max-width: 100px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  position: relative;
}
.nav-user-photo {
  margin: -12px 0 -10px -10px;
  border-radius: 100%;
  border: 2px solid #FFF;
  max-width: 50px;
}

@media (max-width: 767px) {
.xs_color{
  background-color: #38789c;
  padding-top: 3px;
}
.navbar-kanan{
  float: none!important;
  margin-left: -10px;

}
.navbar-kiri{
  margin-left: -5px;
}
.btn-sidebar{
  margin-left:-10px;
}

}

You can check my demo horizontal menu with bootstrap here

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: