Я использую навигационную панель начальной загрузки, и она отлично отображается на большом экране, но когда она попадает на мобильный, она полностью исчезает.
Я пробовал @media и менял размеры, но на самом деле это не работает.
**css**
#navbar {display: inline-block; background-color: #ffffff; color: #FFFFFF;}
#navbar a:link {outline: 0;}
#navbar a:visited {color: #101010; margin:2px; padding: 5px;}
#navbar a:active,
#navbar a:hover {background-color: #f5f5f5; color: #C21315;text-decoration: none; outline: 0;}
/* NAVIGATION BAR LINKS */
#navbar li a { display: inline-block; overflow:visible; }
#navbar li { display: inline-block; overflow:visible; }
@media screen and (max-width: 600px) {
#navbar {display: block;}
}
**Bootstrap navbar**
<nav id="navbar" class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle-"collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only"> Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a style=" font-size: 1.1em; padding-left: 25px; padding-right: 35px;" href="#"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span><span class="sr-only">Home</span></a></li>
<li class="dropdown">
<a style=" font-size: 1.3em; padding-left: 25px; padding-right: 35px;" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
About </a>
<ul class="dropdown-menu" >
<li><a href="#">Our Library</a></li>
<li><a href="#">Action2</a></li>
<li><a href="#">Action3</a></li>
<li><a href="#">Action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>