0

I used two navbars in my application. One Navbar is in the master layout for the menu and the other one is in charge of the search textbox and a button.

I tried to make the second navbar sticky so that when i scroll the content down it should stay on top of the screen.

I tried the navbar-fixed-top properties. But it is not working. Below is the navbar html used:

<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>

Kindly suggest.

Cyberduck
  • 385
  • 6
  • 20
Vikash
  • 340
  • 1
  • 5
  • 24
  • Thank you JNF, This link worked for me. Can you reply this as answer so that i can upvote and close this question? – Vikash Sep 13 '18 at 07:43
  • Answer is not needed. I started the process to close the question as a duplicate. Good luck! – JNF Sep 13 '18 at 08:02

1 Answers1

0

navbar-fixed-top properties Is Built to 'nav' Element Only, You Can Try (Position: fixed) In Your Css File

Mohamed Samy
  • 67
  • 6