Bootstrap Snippet nav-purple + icons 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-trans navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand text-fury" href="#">Lorem</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#"><i class="fa fa-home fa-lg"></i></a></li>
        <li><a href="#">section</a></li>
        <li><a href="#">section</a></li>
        <li><a href="#">section</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
                <li><a href="#" target="_blank"><i class="fa fa-facebook fa-lg"></i></a></li>
                <li><a href="#" target="_blank"><i class="fa fa-twitter fa-lg"></i></a></li>
                <li><a href="#" target="_blank"><i class="fa fa-google-plus fa-lg"></i></a></li>
                <li><a href="#" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a></li>
                <li><a href="#" target="_blank"><i class="fa fa-github fa-lg"></i></a></li>
        </ul>
    </div>
</div>
</nav>
<section>
    <div class="container">
        <div class="wrap">
            <h1> HELLO WORLD! </h1>
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
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
html,body {
    height:100%;
    background:url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/congruent_outline.png");
    background-repeat:repeat
}
a {
    color:#999;
}
a:hover {
    color:#9C27B0;
}
.text-fury, a.fury {
    color:#9C27B0;
}
/* COLOR NAV */
.icon-bar {
    background-color:#fff;
}
.navbar-trans {
    background-color:#2b2b2b;
    color:#cdcdcd;
    border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
    padding: 14px;
    color:#9C27B0;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"nav-purple + icons"
Bootstrap 3.3.0 Snippet by dangobassline

Related: See More

Questions / Comments:

"nav-purple + icons" Bootstrap 3.3.0 Snippet by dangobassline

Related: See More

Questions / Comments:

"nav-purple + icons"
Bootstrap 3.3.0 Snippet by dangobassline