Bootstrap - navbar doesn't work on all screens - html

Question

I'm new and I don't speak english very good but I think that You can understand me and help :). I just started my adventure with bootstrap.
So... my navbar when has only 4 /li/ work with all screen sizes.
Here is the code:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for 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>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">Business Casual</a>
</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">
<li>
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
But the problem is when I modify navbar and add for example 2 more /li/ like this:
<!-- Navigation -->
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for 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="#">Health</a>
</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 ">
<li>
Main menu
</li>
<li>
<a href="#>Doctors</a>
</li>
<li>
Presciprions
</li>
#if(Auth::check())
<li>
Panel
</li>
<li>
Logout
</li>
#else
<li>
Login
</li>
<li>
Register
</li>
#endif
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
My navbar is not responsive with screen between 768 and 992 / and / 992 and 1200. I think, because It doesnt work on Tablets and my navbar is curling - I would like to be always on one line, no matter witch size screen is. Where is my mistake?
Link to page

Answer 1

Please add this code to your custom file css
#media screen (min-width: 768px) and (max-width:1200){
.nav>li>a {
padding: 36px 5px;
}
}