Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Bootstrap3] bug navbar en mode paysage

Sujet résolu
    22 mars 2019 à 13:33:17

    Bonjour,

    j'ai une appli avec bootstrap3.

    Je dispose d'une navbar qui fonctionne parfaitement sur ordi, parfaitement sur mobile en mode portrait, mais qui bug en mode paysage sur certain mobile, lorsque l'on déplie le menu par le bouton hamburger, les éléments du menu apparaissent mais certains ne sont pas affiché et on ne peut pas scroller pour les afficher.

    Voici le menu en mode replié :

    Voici le menu en mode déplié qui bug :

    Comme vous pouvez le voir à partir de "Mes posts" ça bug, on ne voit plus les liens suivants..

    Voici le code :

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                        data-toggle="collapse" data-target="#wd-navbar"
                        aria-expanded="false">
                    <span class="sr-only">{{ 'layout.toggle_nav' | trans }}</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ path('wd_homepage') }}">
                    <img src="{{ asset('img/logo.png') }}"
                         alt="{{ 'wilidoo' | trans }}"
                    >
                </a>
            </div>
    
            <div class="collapse navbar-collapse" id="wd-navbar">
                <form class="navbar-form navbar-left" role="search" action="{{ path('wd_search') }}" method="get">
                    <div class="input-group">
                        <input type="text" class="form-control"
                               name="query"
                               {% if query is defined %}value="{{ query }}"{% endif %}
                               placeholder="{{ 'search' | trans }}">
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-primary btn-search" style="background-color:#5cb7a8;color:white;">
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
                {{ knp_menu_render('AppBundle:Navbar:userMenu', { 'style': 'navbar-right' }) }}
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="btn btn-primary{{ app.request.attributes.get('_route') == 'wd_homepage' ? ' active' }}" href="{{ path('wd_homepage') }}">
                            <i class="fa fa-home"></i>&nbsp;&nbsp;{{ 'menu.navbar.home' | trans }}
                        </a>
                    </li>
                    <li>
                        <a class="btn btn-primary{{ app.request.attributes.get('_route') == 'wd_trending' ? ' active' }}" href="{{ path('wd_trending') }}">
                            {{ 'menu.post.trending' | trans }}
                        </a>
                    </li>
                    <li>
                        <a class="btn btn-primary{{ app.request.attributes.get('_route') == 'wd_post_random' ? ' active' }}" href="{{ path('wd_post_random') }}">
                            {{ 'menu.navbar.random' | trans }}
                        </a>
                    </li>                                                
                {% if app.user %}
                    <li>
                        <a class="btn btn-primary{{ app.request.attributes.get('_route') == 'wd_my_posts' ? ' active' }}" href="{{ path('wd_my_posts') }}">
                            {{ 'menu.navbar.my_posts' | trans }}
                        </a>
                    </li> 
                    <li>
                        <a href="{{ path('wd_notifications') }}">
                            <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">{{ mgilet_notification_unseen_count(app.user) }}</span>
                        </a>
                    </li>
                {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter

    [Bootstrap3] bug navbar en mode paysage

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown