Bootstrap Snippet sticky header using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="header_top"></div>
<div class="menu">
    <header class="container">
     <div class="navbar navbar-inner">
                <div class="container">
 <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
                    <a id="closepage" menuid="0" class="brand" href="#" followlink="true">
                       LOGO</a>
     </div>
                    <div class="collapse navbar-collapse pull-right" id="main-menu">
                        <ul class="nav">
                            <li class="fadeInDown animated d1 "><a href="#" class="active" id="home" menuid="0" followlink="true" >Home</a></li>
                            <li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">About</a></li>
                       
                            <li class="dropdown fadeInDown animated d3">
                                <a href="#" class="trigger right-caret">Service</a>
                                <ul class="firstlevel dropdown-menu sub-menu" style="display: none;">
                                    <li class="twolevel">
                                        <a class="trigger right-caret">Email Support</a>
                                     <!--   <ul class="thirdlevel dropdown-menu sub-menu" style="margin-left: -563px; display: none;">
                                            <li><a href="#" menuid="220" followlink="true">ŞİRKET BİRLEŞME & SATIN ALMA</a></li>
                                            <li><a href="#" menuid="221" followlink="true">HALKA ARZ</a></li>
                                            <li><a href="#" menuid="222" followlink="true">TAHVİL/BONO İHRACI</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.header_top{
    width:100%;
    height:10px;
    background:#00e3ff;
}
.menu{
    width:100%;
    background:#fff;
    box-shadow:0 3px 3px rgba(146,146,146,1.00);
}
.slider{
    width:100%;
}
.navbar-inner {
    margin-top: 0;
    background: #fff;
    box-shadow: none;
    border: none;
    height: 55px;
}
    .navbar-inner .brand {
        margin-top: 14px;
        display: block;
    }
.navbar .nav > li {
    float: left;
    height: 75px !important;
}
    .navbar .nav > li > a:hover,
    .navbar .nav > li > a:active,
    .navbar .nav > li > a:focus,
    .navbar .nav > li > a.active,
    .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .active-menu {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"sticky header"
Bootstrap 3.3.0 Snippet by Pawan Pandey

Related: See More

Questions / Comments:

"sticky header" Bootstrap 3.3.0 Snippet by Pawan Pandey

Related: See More

Questions / Comments:

"sticky header"
Bootstrap 3.3.0 Snippet by Pawan Pandey