Repairing pictures in a navigation bar using Bootstrap

My website currently has this appearance: https://i.sstatic.net/dGqdr.png

However, when accessed through mobile, the design changes to: https://i.sstatic.net/PLITk.png

I would like to have the bag image positioned differently in the menu - similar to this layout on the right side: https://i.sstatic.net/lOdUI.png

Below is a snippet of 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d1ced1d1c4d38fcbd2e1908f90978f90">[email protected]</a>/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>

Can anyone provide assistance with this issue?

Thank you!!

htmlcssbootstrap-4

Answer №1

It's uncertain if this is the recommended approach, but here it is. I simply relocated 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;
}

This is how it will appear

https://i.sstatic.net/rLAYy.png

updated: I believe this could be valuable. The choice between using position absolute or this method is completely yours to make.

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>

Answer №2

Take a look at the Bootstrap documentation to find out if there is a way to specify a nav-item that should always remain visible. Upon initial inspection, the section on "External Content" may offer a solution.

If none of these options work, you could also achieve this by placing the bag icon in a separate div outside of the navbar and adjusting its position manually. However, this method is less than optimal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

javascripthtml

What is the sequence in which the browser handles CSS?

I have a specific class that is being styled in multiple places on my website. I am curious about the order in which the browser reads and applies these different styles. Can you explain this process to me? Inline Style <div class="yellowtag" sty ...

css

Remove specific data from jQuery datatables using data attribute

My jQuery datatable is loaded with data from a database without any filtering by default, providing all the necessary information for users. In addition to the built-in search functionality of jQuery datatables, I have incorporated custom search input fiel ...

javascriptjqueryhtmldatatables

Is it considered acceptable to conduct an https redirect from an http connection?

My web application utilizes node.js, the socket.io library, and a postgresql database while being hosted on heroku. When accessing the site with "http://X", I encounter an error related to the socket.io library that is not present when using "https://X". T ...

htmlnode.jshttphttpssocket.io

Creating a unique Tag Name for Dynamic Components in Angular

I want to customize a component @Component({ selector: '[my-component]', template: `<i>1</i><p>content</p><b>2</b>` }) export class MyComponent { public tagName: string; } Then there's another comp ...

htmlangularangular-componentsangular-dynamic-components

The seamless flow of web design

Seeking guidance on creating a responsive web page. I have a functional website that looks great on my 13" MacBook, but encounters distortion at different screen sizes. What steps are necessary to ensure it appears crisp and appealing on any device? Should ...

javascripthtmlcss

Connecting an HTML button to PHP: A step-by-step guide

Can someone help me figure out how to connect an HTML button to a PHP URL without using JavaScript or jQuery? The button needs to call the PHP script when clicked, and the PHP script should register whether the switch is ON or OFF in my database along with ...

javascriptphpjqueryhtmlbutton

Utilize ajaxFileUpload.js to upload 3 images from various input type files in CodeIgniter effortlessly

I'm looking to enhance my code by enabling the upload of three images from different input types along with a text field using a single submit button function. The current code works fine when uploading only one file, but issues arise when attempting ...

phpjqueryhtmlcodeigniterjsajaxfileuploader

Encountering additional backslashes ("") in each slash within the JSON response received from Laravel AJAX

I have been working on my Laravel app and attempting to make an ajax call. However, I am encountering an issue where there is one extra slash being added, whether it's a backslash or a forward slash. Can someone please explain why this is happening an ...

htmljsonajaxlaravel

Can we bring flexbox inserts, removes, and item positioning to life through animation?

This question was first raised in 2012, but the responses provided didn't address my specific situation (smooth transition for rearranging wrapped content). "After removing an item from a flexbox, the remaining items snap into their new positions imm ...

javascriptcsscss-transitionscss-animationsflexbox

Increase the width of paragraph by adding white-space padding

I am attempting to control the number of characters in a paragraph to a specific limit. If the text is shorter, I want to add whitespace padding, and if it exceeds the limit, I will truncate it with an ellipsis. All containers containing paragraphs should ...

htmlcsswhitespacezurb-foundation

Highlighting a specific list item dynamically without affecting its nested children

While I have come across similar questions, they don't quite address the specific issue I'm facing. My current project involves creating a keyboard-accessible tree widget. My goal is to apply a background color to the selected list item without ...

jquerycssfocusbackground-colorhtml-lists

Message within the boundary of the input field

Click here to view the image It would be great to have the text "text name" displayed on the border of the input box. Here is the HTML code - <input type="text" id="text creator" class="form-control" placeholder="text creator" na ...

htmlcssangularborder

Adjusting the size of an image in CSS to perfectly fit the browser dimensions

I'm having trouble getting the images to resize properly to fit the browser window just like the background image. I've tried using max-width:100%; height:auto; max-height:100%; The images don't seem to resize correctly when I adjust the s ...

htmlcssimageimage-resizing

How come I am unable to alter the container padding variable within BootstrapVue?

I am currently in the process of developing a BootstrapVue 2.0 theme that is based on Bootstrap 4.3, following the guidance provided by the VueBootstrap theming guide. Inside my theme.scss file, I have included my custom overrides at the beginning and impo ...

bootstrap-4themesbootstrap-vue

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

javascripthtmlcss

Having trouble with implementing Jquery for inserting an element and then animating it using CSS through a class change

I am trying to insert an element using the "insertAfter" method and then add a class to trigger a CSS animation. It seems to work when I use a timeout function: First Approach (with Timeout) $content.insertAfter($("#2")); setTimeout(function(){ $con ...

jquerycssanimation

The HTML div measuring A4 dimensions surpasses the size of an A4 document

When I set the size of a parent div to A4 (size="21cm 29.7cm"), I encountered an issue in Chrome's print preview where the HTML page would not fit on A4 without any margins. I had to manually scale it down to 80%. I was under the impression ...

htmlcss

Table expands to full width

I am facing an issue with a table that has a large number of elements. I would like the table to expand to the full width of the screen, but it slows down significantly when it does so. https://i.sstatic.net/s475I.png However, I have noticed that if I se ...

javascripthtmlcssreactjshtml-table

Enhancing the appearance of radio buttons and checkboxes with Bootstrap 4's

Having trouble customizing radio and checkbox styles in Bootstrap 4? I'm trying to achieve something like this: https://i.sstatic.net/Wp6SR.jpg I've successfully changed the background, but I'm struggling to change the style when the radi ...

htmlcssbootstrap-4