jquery - Bootstrap navbar menu logo not working -
please take on bootply or below code snippet, using bootstrap 3.1 because want use awesome search box on site. having issue, navbar logo not working (it's not hovering it's not clickable).
note: brand logo working fine in mobile version, having issue in desktop versions. so, if running below code snippet, click full screen see problem.
i not css guy, can guys please me how fix this. thanks
$(function () { // remove search if user resets form or hits escape! $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) { console.log(event.currenttarget); if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasclass('active') || $(event.currenttarget).attr('type') == 'reset') { closesearch(); } }); function closesearch() { var $form = $('.navbar-collapse form[role="search"].active') $form.find('input').val(''); $form.removeclass('active'); } // show search if form not active // event.preventdefault() important, prevents form submitting $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) { event.preventdefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $form.addclass('active'); $input.focus(); }); // demo // please use $('form').submit(function(event)) track submission // if form ajax remember call `closesearch()` close search container $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) { event.preventdefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $('#showsearchterm').text($input.val()); closesearch() }); });body { padding: 60px 0px; } .navbar-collapse { position: relative; padding-top: 30px !important; max-height: 270px; } .navbar-collapse form[role="search"] { position: absolute; top: 0px; right: 0px; width: 100%; padding: 0px; margin: 0px; z-index: 0; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 8px 12px; border-radius: 0px; border-width: 0px; color: rgb(119, 119, 119); background-color: rgb(248, 248, 248); border-color: rgb(231, 231, 231); box-shadow: none; outline: none; } .navbar-collapse form[role="search"] input { padding: 16px 12px; font-size: 14pt; font-style: italic; color: rgb(160, 160, 160); box-shadow: none; } .navbar-collapse form[role="search"] button[type="reset"] { display: none; } @media (min-width: 768px) { .navbar-collapse { padding-top: 0px !important; padding-right: 38px !important; } .navbar-collapse form[role="search"] { width: 38px; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 15px 12px; } .navbar-collapse form[role="search"] input { font-size: 18pt; opacity: 0; display: none; height: 50px; } .navbar-collapse form[role="search"].active { width: 100%; } .navbar-collapse form[role="search"].active button, .navbar-collapse form[role="search"].active input { display: table-cell; opacity: 1; } .navbar-collapse form[role="search"].active input { width: 100%; } }<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.google.com">brand logo</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#" class="">link</a> </li> <li><a href="#" class="">link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" class="">action</a> </li> <li><a href="#" class="">another action</a> </li> <li><a href="#" class="">something else here</a> </li> <li class="divider"></li> <li><a href="#" class="">separated link</a> </li> <li class="divider"></li> <li><a href="#" class="">one more separated link</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="">link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" class="">action</a> </li> <li><a href="#" class="">another action</a> </li> <li><a href="#" class="">something else here</a> </li> <li class="divider"></li> <li><a href="#" class="">separated link</a> </li> </ul> </li> </ul> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="search"> <span class="input-group-btn"> <button type="reset" class="btn btn-default"> <span class="glyphicon glyphicon-remove"> <span class="sr-only">close</span> </span> </button> <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-search"> <span class="sr-only">search</span> </span> </button> </span> </div> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="alert alert-info" style="display: none;"> <strong class="">alerts dont work on bootsnipp!</strong> when hit enter or submit form result show in green box below!</div> <div class="alert alert-success" style="display: none;"> <strong class="">your result!</strong> <span id="showsearchterm" class=""></span> </div> </div> </div>
it seems have put in effort already. have css hack problem.
to prioritize logo on other elements.
add
.navbar-brand { position: relative; z-index: 1; } now search override/prioritize on logo when expanded,
change
.navbar-collapse form[role="search"] { z-index: 2; } $(function() { // remove search if user resets form or hits escape! $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) { console.log(event.currenttarget); if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasclass('active') || $(event.currenttarget).attr('type') == 'reset') { closesearch(); } }); function closesearch() { var $form = $('.navbar-collapse form[role="search"].active') $form.find('input').val(''); $form.removeclass('active'); } // show search if form not active // event.preventdefault() important, prevents form submitting $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) { event.preventdefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $form.addclass('active'); $input.focus(); }); // demo // please use $('form').submit(function(event)) track submission // if form ajax remember call `closesearch()` close search container $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) { event.preventdefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $('#showsearchterm').text($input.val()); closesearch() }); });body { padding: 60px 0px; } .navbar-collapse { position: relative; padding-top: 30px !important; max-height: 270px; } .navbar-collapse form[role="search"] { position: absolute; top: 0px; right: 0px; width: 100%; padding: 0px; margin: 0px; z-index: 2; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 8px 12px; border-radius: 0px; border-width: 0px; color: rgb(119, 119, 119); background-color: rgb(248, 248, 248); border-color: rgb(231, 231, 231); box-shadow: none; outline: none; } .navbar-collapse form[role="search"] input { padding: 16px 12px; font-size: 14pt; font-style: italic; color: rgb(160, 160, 160); box-shadow: none; } .navbar-collapse form[role="search"] button[type="reset"] { display: none; } .navbar-brand { position: relative; z-index: 1; } @media (min-width: 768px) { .navbar-collapse { padding-top: 0px !important; padding-right: 38px !important; } .navbar-collapse form[role="search"] { width: 38px; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 15px 12px; } .navbar-collapse form[role="search"] input { font-size: 18pt; opacity: 0; display: none; height: 50px; } .navbar-collapse form[role="search"].active { width: 100%; } .navbar-collapse form[role="search"].active button, .navbar-collapse form[role="search"].active input { display: table-cell; opacity: 1; } .navbar-collapse form[role="search"].active input { width: 100%; } }<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.google.com">brand logo</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#" class="">link</a> </li> <li><a href="#" class="">link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" class="">action</a> </li> <li><a href="#" class="">another action</a> </li> <li><a href="#" class="">something else here</a> </li> <li class="divider"></li> <li><a href="#" class="">separated link</a> </li> <li class="divider"></li> <li><a href="#" class="">one more separated link</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="">link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" class="">action</a> </li> <li><a href="#" class="">another action</a> </li> <li><a href="#" class="">something else here</a> </li> <li class="divider"></li> <li><a href="#" class="">separated link</a> </li> </ul> </li> </ul> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="search"> <span class="input-group-btn"> <button type="reset" class="btn btn-default"> <span class="glyphicon glyphicon-remove"> <span class="sr-only">close</span> </span> </button> <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-search"> <span class="sr-only">search</span> </span> </button> </span> </div> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="alert alert-info" style="display: none;"> <strong class="">alerts dont work on bootsnipp!</strong> when hit enter or submit form result show in green box below!</div> <div class="alert alert-success" style="display: none;"> <strong class="">your result!</strong> <span id="showsearchterm" class=""></span> </div> </div> </div>
Comments
Post a Comment