Bootstrap Snippet header using HTML CSS Bootstrap

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 ---------->
<section class="jk-header">
    <div class="container">
        <div class="row">
            <div class="col-12-md">
    
            <nav class="navbar navbar-inverse">
                
        <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
            <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="#"><img src="images/logo.png" alt=""/></a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-3">
          <ul class="nav navbar-nav navbar-right">
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">Contact Us</a></li>
            
          </ul>
          
        </div><!-- /.navbar-collapse -->
     <!-- /.container -->
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
@charset "utf-8";
/* CSS Document */
@font-face{
    font-family:myLobster;
    src:url(../fonts/LobsterTwo-Bold.otf);  
}
@font-face{
    font-family:myriadRegular;
    src:url(../fonts/MyriadPro-Regular.otf);
}
@font-face{
    font-family:myriadbold;
    src:url(../fonts/MyriadPro-Bold.otf);
}
.jk-header-top{
    width:100%;
    height:10px;
    background:#ff0000;
}
.jk-header{
    width:100%;
    background:#17191b;
     border-top:10px solid #ff0000;
}
/*
Code snippet by maridlcrmn for Bootsnipp.com
Follow me on Twitter @maridlcrmn
*/
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; }
.navbar .navbar-collapse { position: relative; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"header"
Bootstrap 3.3.0 Snippet by jaikesh yadav

Related: See More

Questions / Comments:

"header" Bootstrap 3.3.0 Snippet by jaikesh yadav

Related: See More

Questions / Comments:

"header"
Bootstrap 3.3.0 Snippet by jaikesh yadav