Aujourd'hui, mon site Web ressemble à ceci: entrez la description de l'image ici

Lorsque je me connecte à mon site Web via un mobile, l'apparence se transforme en: entrez la description de l'image ici

Au lieu de cela, j'aimerais que l'image du sac n'aille pas dans le menu - quelque chose comme ça à droite: entrez la description de l'image ici

Mon code:

  <body>
    <!-- jQuery first -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">

  <a class="navbar-brand">DeniseAndrade</a>

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


   <div class="collapse navbar-collapse" id="navbarSupportedContent">

     <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
      </li>
         {% for category in categories %}
      <li class="nav-item">
        <a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
      </li>
          {% endfor %}
      </ul>


    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="{% static 'bag1.png' %}" width="25px"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'login' %}">Login</a>
      </li>
    </ul>
   </div>
  </nav>

  <main role="main" class="container">
    <div class="pb-2 mb-2">
      {% block page_header %}{% endblock page_header %}
    </div>
    <div>
      {% block content %}{% endblock content %}
    </div>
  </main>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>  
  </body>

De l'aide?

Je vous remercie!!

2
Felipe Dourado 23 août 2020 à 22:55

2 réponses

Meilleure réponse

Je ne suis pas sûr que ce soit la meilleure pratique. Mais voilà. Je viens de déplacer la balise de requête en dehors du div collapse navbar-collapse

   <a class="nav-link outside__div" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
        ------
        </div>

Modifications CSS:

.outside__div {
    position: absolute;
    right: 80px;
}

Et c'est à quoi ça ressemblerait

result

Mis à jour: je pense que cela pourrait être utile. c'est à vous de choisir le meilleur moyen avec la position absolue ou celle-ci.

HTML:

<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">
    <a class="navbar-brand">DeniseAndrade</a>
    <div class="d-flex flex-row  order-2 order-md-3">
        <ul class="navbar-nav flex-row ">
            <li class="nav-item pr-3">
                <a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
            </li>
        </ul>
        <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-md-2" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
            </li>
            {% for category in categories %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
            </li>
            {% endfor %}
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'login' %}">Login</a>
            </li>
        </ul>
    </div>
</nav>
1
Ahmad Dalao 24 août 2020 à 11:34

Reportez-vous à la documentation Bootstrap et voyez s'il existe un moyen d'indiquer un nav-item qui ne devrait jamais être réduit. En un coup d'œil, "Contenu externe" pourrait être ce que vous voulez ?

Si tout le reste échoue, vous pouvez également le faire en plaçant l'icône du sac dans un div en dehors de la barre de navigation et en le positionnant manuellement. Bien sûr, c'est loin d'être idéal.

0
Cheezmeister 23 août 2020 à 20:04