CODEWITHSUNDEEP
htmlcssbootstrap-4
Felipe Dourado
Felipe Dourado

Reputation: 441

Fixing image in a navbar | Bootstrap

Today's my website is looking like this: enter image description here

When I connect into my website through mobile, the appearence changes to: enter image description here

Instead of this, I'd like that the bag image didn't go to the menu - something like this in the right: enter image description here

My 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/[email protected]/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>

Any help?

Thank you!!

Upvotes: 2

Views: 432

Answers (2)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

I'm not sure if this is the best practice. But there you go. I just moved the request tag outside the 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>

CSS changes:

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

And that's how it would look like

result

updated: I think that might be useful. it's all up to you to pick the best way either with position absolute or this one.

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>

Upvotes: 1

Cheezmeister
Cheezmeister

Reputation: 4985

Refer to the Bootstrap documentation and see if there is a way to indicate a nav-item that should never get collapsed. At a glance, "External Content" might be what you want?

If all else fails, you could also accomplish this by putting the bag icon in a div outside the navbar and positioning it manually. Of course, this is less than ideal.

Upvotes: 0

Related Questions