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>