Bootstrap Snippet 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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
        <div class="navbar navbar-default navbar-fixed-top">
            <header id="header-site">
            
                <div class="logo-site">
                    <h1><a href="#">Leistung</a></h1>
                </div>
                
                <!--Begin::Mobile View Navigation-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button>
                <!--End::Mobile View Navigation-->
                
                <!--Begin::Header right-->
                <ul class="nav navbar-right pull-right top-nav">
                    <li class="dropdown dropdown-notification"> <a class="dropdown-toggle" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"> <i class="fa fa-bell-o"></i> <span class="badge badge-default"> 3 </span> </a>
                        <ul class="dropdown-menu">
                            <li class="external">
                                <h3> <span class="bold">12 pending</span> notifications</h3>
                                <a href="page_user_profile_1.html">view all</a> 
                            </li>
                            <li>
                                <ul class="dropdown-menu-list">
                                    <li> <a href="javascript:;"> <span class="time">just now</span> <span class="details"> <span class="label label-sm label-icon label-success"> <i class="fa fa-plus"></i> </span> New user registered. </span> </a> </li>
                                    <li> <a href="javascript:;"> <span class="time">3 mins</span> <span class="details"> <span class="label label-sm label-icon label-danger"> <i class="fa fa-bolt"></i> </span> Server #12 overloaded. </span> </a> </li>
                                    <li> <a href="javascript:;"> <span class="time">10 mins</span> <span class="details"> <span class="label label-sm label-icon label-warning"> <i class="fa fa-bell-o"></i> </span> Server #2 not responding. </span> </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
body {
    font-family: "Open Sans",sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    line-height: 22px;
    white-space: normal;
}
#header-site {
    background: #262727 none repeat scroll 0 0;
    border-bottom: 2px solid #cf4137;
    float: left;
    position: fixed;
    top: 0;
    width: 100%;
}
.logo-site {
    float: left;
    height: 50px;
    margin: 5px 0 0px 10px;
    width: 140px;
}
.logo-site h1 {
    margin: 0;
}
.logo-site h1 a {
    float: left;
    height: 40px;
    width: 131px;
    text-indent:-999px;
    background-image:url('https://upload.wikimedia.org/wikipedia/en/7/79/Veeco_company_logo.png');
    background-repeat:no-repeat;
    background-position:0px; 
    background-size:100px;
}
/*Notification Bell dropdown*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Header"
Bootstrap 3.3.0 Snippet by sonia14

Related: See More

Questions / Comments:

"Header" Bootstrap 3.3.0 Snippet by sonia14

Related: See More

Questions / Comments:

"Header"
Bootstrap 3.3.0 Snippet by sonia14