[SOLUCIONADO] Problema con menu responsive y superposición

fede_carbone · #1 (**permalink**) 22/06/2015, 08:07

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>

adry02ml · #2 (**permalink**) 22/06/2015, 08:53

Yo usaria posiciones absolutas en el caso de los menus responsive, todas estas siempre con un z-index mayor a los que puedas tener en los contenidos de tu página. También puedes ponerlo en relative y debería de empujar el contenido de la web hacia abajo.

Saludos y suerte!

fede_carbone · #3 (**permalink**) 22/06/2015, 15:26

Mi problema estaba en que el menú tenía asignado algunos estilos css que entorpecían con el efecto acordeón.

Saludos.