Bootstrap Snippet Navbar Transparent && Hover border Bottom 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
<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 style="height:900px;background-color:#3498db ">
    <header style="">
        <nav class="navbar navbar-default tembus">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
              </button>
              <a class="navbar-brand" href="#">Indonesia Youth Dream</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="hvrcenter">Home</a></li>
                <li><a href="#" class="hvrcenter">About</a></li>
                <li><a href="#" class="hvrcenter">TimeLine</a></li>
              </ul>
            </div>
          </div>
        </nav>
    </header>
</div>
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
.navbar-default{
    background-color: #e74c3c !important; 
}
.navbar-default .navbar-header > a {
    color: #ecf0f1 ; 
}
.navbar-default .navbar-nav > li > a{
    color:#ecf0f1 ;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    border-bottom: 2px solid #ecf0f1;
    background-color: transparent;
}
.tembus{
    background-color: transparent !important;
}
.hvrcenter {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.hvrcenter:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Navbar Transparent && Hover border Bottom"
Bootstrap 3.3.0 Snippet by akhsya

Related: See More

Questions / Comments:

"Navbar Transparent && Hover border Bottom" Bootstrap 3.3.0 Snippet by akhsya

Related: See More

Questions / Comments:

"Navbar Transparent && Hover border Bottom"
Bootstrap 3.3.0 Snippet by akhsya