Tengo una plantilla base en mi proyecto, que simplemente contiene el menú de mi sitio.
Sucede que cuando quiero adaptar ese diseño a responsive, e intento desplegar ese menú, el mismo se superpone al contenido del cuerpo de mi html.
Debería asignar posiciones relativas o absolutas?
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>SGC</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block stylesheets %}
<link href="{{ asset('bundles/publicartelapp/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('bundles/publicartelapp/css/sgc.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('bundles/publicartelapp/css/select2.min.css') }}" rel="stylesheet" media="screen"/>
{% endblock %}
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="{{ path('index') }}">
<img src="{{ asset('bundles/publicartelapp/img/stm_logo.jpg') }}">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="{{ path('content') }}" class="dropdown-toggle" role="button" aria-expanded="false">Contenidos <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ path('content_new') }}">Agregar</a></li>
<li class="divider"></li>
<li><a href="{{ path('category') }}">Categorías</a></li>
</ul>
</li>
<li class="dropdown">
<a href="{{ path('playlist') }}" class="dropdown-toggle" role="button" aria-expanded="false">Listas de Reproducción<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ path('playlist_new') }}">Agregar</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="{{ path('area') }} " class="dropdown-toggle" role="button" aria-expanded="false">Andenes <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ path('area_new') }}">Agregar</a></li>
</ul>
</li>
<li class="dropdown" style="margin-right:20px;">
<a href="{{ path('player') }}" class="dropdown-toggle" role="button" aria-expanded="false">Players <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ path('player_new') }}">Agregar</a></li>
<li class="divider"></li>
<li><a href="{{ path('playergroup') }}">Grupos de players</a></li>
</ul>
</li>
<li><a href="{{ path('PublicartelAppBundle_auth_logout') }}">Salir</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
{% block body %}
{% endblock %}
</div>
{% block javascripts %}
<script src="{{ asset('bundles/publicartelapp/js/lib/jquery-1.11.2.min.js') }}"></script>
<script src="{{ asset('bundles/publicartelapp/js/bootstrap.file-input.js') }}"></script>
<script src="{{ asset('bundles/publicartelapp/js/jquery-sortable.js') }}"></script>
<script src="{{ asset('bundles/publicartelapp/js/jquery-ui.js') }}"></script>
<script src="{{ asset('bundles/publicartelapp/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('bundles/publicartelapp/js/select2.min.js') }}"></script>
<script src="{{ asset('bundles/publicartelapp/fancybox/jquery.fancybox.pack.js') }}">
</script>
{% endblock %}
</body>
</html>