Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

🏠 » CSS » Create Beautiful Custom Horizontal Menu with Bootstrap 3

Create Beautiful Custom Horizontal Menu with Bootstrap 3

By ∙ ∙ CSS ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
.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

Another CSS Related Post :

Reader Interactions

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.