In my application, I have implemented two navbars. The first navbar is part of the master layout and is used for displaying the menu options. The second navbar contains a search textbox and a button.
I attempted to make the second navbar sticky so that it remains at the top of the screen when scrolling down the content.
I tried using the properties of navbar-fixed-top, but unfortunately, it did not work as expected.
Below is the HTML code for the second navbar:
<div id="dvHomeSearch">
<nav class="navbar-header navbar-default homeTheme">
<div class="container-fluid">
<div class="row" id="dvHomeSearchRow">
<div class="col-sm-1" style="padding-top:20px;">
<div style="text-align:center">
<a href='@Url.Action("Search","Home")' style="color:white">My Search</a>
</div>
</div>
<div class="col-sm-6" style="padding-top:14px">
<div class="form-group input-group" id="formUser">
<input type="text" id="txtHomeSearch" class="form-control input-md typeahead" placeholder="Search..." autocomplete="off" spellcheck="false" />
<span id="spnBtnSearch" class="input-group-addon" style="cursor:pointer" title="Search"><i class="glyphicon glyphicon-search"></i></span>
</div>
<div style="width:100%; text-align:center; vertical-align:top">
<span id="PopupMessage" style="display:none; background-color:#00ffff; color:black; font-size:10px">Search Intelligence is not available after complete type press tab</span>
</div>
<input type="hidden" id="hdnHomeSearch" />
</div>
<div class="col-sm-5">
</div>
</div>
</div>
<div style="height:100%">
</div>
</nav>
</div>
<div id="dvSearchGrid" class="container" style="width:100%">
Html Content....
</div>Please provide any suggestions or solutions for this issue.