I am experiencing an issue with the navbar menu on my bootstrap website. While it displays correctly on desktop, the menu appears differently on tablets and mobile devices when it collapses. The dropdown menu that shows up on mobile looks similar to the desktop version instead of the expected format for mobile screens:
HTML:
<nav class="navbar navbar-simelsa">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="menu-text hidden-lg hidden-md hidden-sm">Menú<button type="button" class="navbar-toggle collapsed navbar-bottom" data-toggle="collapse" data-target="#navbar-simelsa">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-center" id="navbar-simelsa">
<ul class="nav navbar-nav">
<li class="inicio"><a href="#">Inicio</a></li>
<li class="nosotros"><a href="#">Nosotros</a></li>
<li class="dropdown servicios">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Servicios <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="productos"><a href="#">Productos</a></li>
<li class="noticias"><a href="#">Noticias</a></li>
<li class="contacto"><a href="#">Contacto</a></li>
</ul>
<li class="lang navbar-right nav navbar-nav"><a href="#">ESP | ENG</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
@media (min-width: 1024px) {
.slick-prev, .slick-next {
top: -12% !important;
}
}
@media (max-width: 1024px) {
.header-bg {
background: none !important;
}
...
/*
Remaining CSS code goes here
*/
...
.social ul li:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}