how to adjust html nav-bar to be responsive

Question

I am trying to build a menu bar. I am using with twitter's bootstrap.

In a normal size page it looks good:

When I resize the page to medium it looks like:

and in a small size page it looks like:

this is my html code:

<header id="">
        <nav class="navbar navbar-inverse navbar-fixed-top cbp-af-header"
            role="navigation" style=" background-color: #0071c5">
            <div class="container-fluid">
                <ul class="container-fluid nav navbar-nav pull-right " style="max-width: inherit">

                    <asp:ContentPlaceHolder ID="userphoto" runat="server">
                    </asp:ContentPlaceHolder>
                    <li>
                        <a href="EditUser.aspx">
                            <asp:Image class="img-circle" ID="usrimg" src="" alt="Image Not Found" Style="margin-left: 10px; height: 50px;" runat="server" />
                        </a>

                    </li>
                    <li>
                        <a href="https://www.intel.com">
                            <img src="../../images/candy.jpg" style="max-width: 50px; max-height: 60px;" />
                        </a>
                    </li>
                </ul>


                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header ">

                    <button type="button" class="navbar-toggle collapsed pull-left"
                        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>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-left">

                        <asp:ContentPlaceHolder ID="MainMasterPage" runat="server">
                        </asp:ContentPlaceHolder>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact-us">Contact Us</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

    </header>

Answer 1

You can use media breakpoints, so when the page shrinks to a specific resolution it updates the stylesheet. A detailed explanation is here .