Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Bootstrap 5.x]Rendre un header responsive

    17 décembre 2021 à 9:28:07

    Salut, je voudrais que mon header soit responsive comme un navbar. Sur mobile je voudrais l'apparition du bouton a 3 barres de bootstrap qui permet l'affichage des menus de navigation. J'ai essaye mais le rendu n'est vraiment pas comme je veux. Voici mon code:
    <header class="p-3 bg-dark text-white">
    				<div class="container">
    					<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
    						<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
    							<img src="images/icon_edited.jpg" alt="Jeff Store and Services" height="32px">
    						</a>
    
    						<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
    							{% set routes = ['index', 'store', 'inapppurchases', 'cryptoexchange', 'faqs'] %}
    							{% set tags = ['Home', 'Store', 'In-app Purchases', 'CryptoExchange', 'FAQs'] %}
    							{% for i in 0..4 %}
    								{% set text_color = 'text-white' %}
    								{% if i == id - 1 %}
    									{% set text_color = 'text-gold' %}
    								{% endif %}
    								<li>
    									<a href="{{ path(routes[i]) }}" class="nav-link px-2 {{ text_color }}">{{ tags[i] }}</a>
    								</li>
    							{% endfor %}
    						</ul>
    
    						<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
    							<input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
    						</form>
    
    						{% if is_logged %}
    							<div class="text-end">
    								<button type="button" class="btn btn-outline-light me-2">Login</button>
    								<button type="button" class="btn btn-warning">Sign-up</button>
    							</div>
    						{% endif %}
    					</div>
    				</div>
    			</header>
    

    S'il vous plait ignorer les ligne avec les accolades...

    Voila donc mon code ci-dessus. J'ai insere apres 

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    Puis inserer le bloc <ul> dans une div avec pour id navbarSupportedContent et pour class collapse, mais rien. Des avis svp?

    • Partager sur Facebook
    • Partager sur Twitter

    [Bootstrap 5.x]Rendre un header responsive

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown