To start I want to comment that when making this superior browser I did not take into account that this would happen, I created it based on boostrap classes but it did not work out as I wanted, then I present the problem.
I have a nav which is not responsive, this means that when I see on very small screens the page the top menu disappears, also what comes under the top menu will look after it since it is fixed , I will show with images.
Top menu on pc screens
Top menu on small screens (cell)
Top menu hiding what appears behind
Top menu code with bootstrap classes
<nav class="navbar navbar-default navbar-expand-md navbar-fixed-top">
<a class="navbar-brand" href="#">GetJob</a>
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- <li class="active"> <a href="#">Menu Principal</a> </li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="eventos/" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Eventos
</a>
<div class="dropdown-menu text-center" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item " href="eventos/crear">Crear Evento</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="eventos/visualizar">Ver Eventos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="eventos/misEventos">Mis Eventos</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a onclick="verperfil({{user.id_user}});">Perfil</a>
</li>
<li>
<a href="logout">Cerrar Sesion
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Code of what comes under the top menu:
<div class="col-sm-4 text-center">
<div class="card">
<div class="card-body">
<h3 class="card-title">Evento:
{{d.nombre}}</h3>
<h4 class="card-subtitle mb-2 text-muted">Personal:
{{d.funcion}}</h4>
<p class="card-text text-muted">Fecha:
{{d.fecha}}</p>
{% if d.fecha >= fecha %}
<a href="#" class="btn btn-primary">TOMAR EMPLEO</a>
<a id="masInformacion" class="btn btn-success">MAS INFORMACIÓN</a>
{% else %}
<a href="" class="btn btn-danger">EMPLEO FINALIZADO</a>
{% endif %}
</div>
</div>
</div>