• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

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

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » CSS » Create Beautiful Custom Horizontal Menu with Bootstrap 3

Create Beautiful Custom Horizontal Menu with Bootstrap 3

By Sigit Prasetya Nugroho ∙ March 8, 2015 ∙ 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 :

  • Free Simple Admin Dashboard Bootstrap 4 By Seegatesite
  • 4 Best Sites To Download School And Education Icons Sets
  • How to Make a Shake Effect Validation Like the WordPress Login Form
  • [CSS] How To Fixed Select2 Responsive Width
  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • How To Centering And Make Full Width Youtube Iframe On Blog Article

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

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

Time limit is exhausted. Please reload CAPTCHA.

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

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com