Bootstrap Snippet navbar affix search inline using HTML CSS jQuery

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 ---------->
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<header><p>Scroll to affix</p></header>
<nav class="navbar navbar-default affix-top" role="navigation" id="BB-nav">
    <div class="container-fluid">
        <div class="container nav-container">
<!--            <div class="navbar-header">-->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".BB-nav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
<!--            </div>-->
            <ul id="menu-menu" class="nav navbar-nav BB-nav collapse navbar-collapse">
                <li class="menu-item"><a title="Itme1" href="#">Item 1</a></li>
                <li class="menu-item"><a title="Itme2" href="#">Item21</a></li>
            </ul>            
            
            <ul class="nav navbar-nav navbar-right nav-pills">
                <li>
                        <a href="https://www.facebook.com/bruyerefreelance" target="_blank">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </li>
                                                    <li>
                        <a href="https://twitter.com/BruyereWeb" target="_blank">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </li>
                                                    <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
/*for the demo*/
header {
 height: 200px;
}
header p {
    padding-top: 100px;
 text-align: center;
}
.content {
 height: 800px;   
}
body {
    max-height: 400px;
}
/* end demo */
/* created with Sass*/
.navbar-default {
  background-color: #fff;
  border: 3px double #eee;
  border-radius: 0;
  border-left: none;
  border-right: none; }
#BB-nav.affix {
  position: fixed;
  top: 0px;
  -webkit-transition: top 1s ease-in;
  transition: top 1s ease-out; }
#BB-nav {
  width: 100%;
  background-color: #fff;
  z-index: 999;
  top: -30px; }
  #BB-nav .dropdown-menu {
    border: none; }
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
  $(function(){
      //nav affix
      $('#BB-nav').affix({
          offset: {
              top: $('header').height()
          }
      });
      //search form
      //close on escape key
      $(document).keyup(function(e) {
          if(e.which === 27){
              closeSearch();
          }
      });
      function closeSearch() {
          $('.search-field').val('');
          $('.search-field').hide();
          $('#search-nav').removeClass('active');
          $('#search-nav button[type="reset"]').hide();
      }
      function openSearch() {
          $('#search-nav').addClass('active');
          $('.search-field').show();
          $('#search-nav button[type="reset"]').show();
      }
      // Show Search if form is not active or input search empty
      $('#search-nav button[type="submit"]').click(function(event) {
          if(!$( "#search-nav" ).hasClass( "active" ) || $('.search-field').val() === '') {
              event.preventDefault();
              openSearch();
          }
      });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"navbar affix search inline"
Bootstrap 3.3.0 Snippet by fundup

Related: See More

Questions / Comments:

"navbar affix search inline" Bootstrap 3.3.0 Snippet by fundup

Related: See More

Questions / Comments:

"navbar affix search inline"
Bootstrap 3.3.0 Snippet by fundup