Bootstrap Snippet nav with search hover 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!-- DEMO -->
<nav>
  <div class="inner">
    <input class="search_box" type=search placeholder="Search...">
    <div class="search"><i class="fa fa-search"></i></div>   
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul> 
  </div>
</nav>
<script>
    // Search Toggle //
$( ".search" ).click(function() {
 $( "ul" ).toggleClass( "active" );
 $( ".search_box" ).toggleClass( "search_box_active" );
});
</script>
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 {
  background: #2E2F40;
  font-family: 'Montserrat', sans-serif;
}
nav {
  max-width: 1000px;
  height: 0px;
  border-bottom: 100px solid #860255;
  border-left: 40px solid transparent;
  position: relative;
  margin: 0 auto;
  box-shadow: 20px 17px 27px rgba(0, 0, 0, 0.15);
}
nav::before {
  content: '';
  margin-top: 10%;
  display: block;
}
nav .inner {
  width: 100%;
  height: 100px;
  position: absolute;
  right: 0;
  overflow: hidden;
  background: #860255;
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #860255), color-stop(100, #EF4B3F));
  /* IE10+ */
  background-image: -ms-linear-gradient(left, #860255 0%, #EF4B3F 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(left, #860255 0%, #EF4B3F 100%);
  /* Opera */
  background-image: -o-linear-gradient(left, #860255 0%, #EF4B3F 100%);
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(left, #860255 0%, #EF4B3F 100%);
  /* W3C Markup */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"nav with search hover"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"nav with search hover" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"nav with search hover"
Bootstrap 3.0.0 Snippet by evarevirus