The cart icon is not visible in the responsive mode

There seems to be an issue with my cart icon not displaying in the navbar toggle when the display size is reduced.

I am currently using Bootstrap 5 for the navbar. I can navigate to the cart page by clicking on the toggler, but the icon itself is not visible. Does anyone have any suggestions on how I can resolve this problem?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617e617c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f02464c40415c6f1e0117011e">[email protected]</a>/font/bootstrap-icons.css">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <div class="container">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
    <div class="collapse navbar-collapse" id="navmenu">
      <a href="" class="navbar-brand ms-auto">Meat</a>
      <ul class="navbar-nav">
        <li class="nav-item px-4">
          <a href="/html/ailes/fruits&vegetables.html" class="nav-link lead">Fruits & Vegetables</a>
        </li>
        <li class="nav-item px-4">
          <a href="/html/ailes/dairy&eggs.html" class="nav-link lead">Dairy & Eggs</a>
        </li>
        <li class="nav-item px-4">
          <a href="/html/ailes/snacks.html" class="nav-link lead">Snack</a>
        </li>
        <li class="nav-item px-4">
          <a href="/html/ailes/drinks.html" class="nav-link lead">Drinks</a>
        </li>
        <li class="nav-item px-4">
          <a href="/html/ailes/bakery.html" class="nav-link lead">Bakery</a>
        </li>
        <a href="/html/cart.html"> <i class="bi bi-basket2-fill h2 cart-color"></i></a>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5b405f405d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

htmlcssbootstrap-5

Answer №1

Your cart icon element exists, but on a tablet, the size might exceed the screen's boundaries. To resolve this issue, consider implementing one of the following solutions:

1 - Try repositioning the navbar (using the COl styling in Bootstrap). For more information on this method, refer to the grid documentation on the Bootstrap website: https://getbootstrap.com/docs/5.1/components/navbar/

2 - Alternatively, you can use "position absolute" for the icon. However, it is not recommended as it may not result in a professional appearance.

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

Choose the grandparent of an element's parent

Is there a way to select the grandparent element of a child in Javascript without having to chain the .parentElement method twice? Specifically, I am looking for a method that can substitute .parentElement.parentElement when selecting the desired element, ...

javascripthtmlcss

Outlook failing to recognize text dimensions

Implementing: <html> <head> <style> p { font-size: 16px; } .font-size-16 { font-size: 16px !important; } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspend ...

htmlcssoutlookhtml-emailfont-size

What is the reason for the request to accept */* when the browser is seeking a JavaScript file?

The html source appears as follows: <script type="text/javascript" language="JavaScript" src="myscript.js"></script> Upon debugging the http request using Fiddler, it is evident that the browser (Chrome) sends a GET request for myscript.js wi ...

javascripthtmlhttp

Exploring the ins and outs of HTML event handlers with JavaScript

When using events in your HTML and including a small amount of JavaScript, what is this called? Is it referred to as a "JavaScript attribute function," simply a "JavaScript attribute," or something else entirely? For example: <button onClick="locat ...

javascripthtmldom-events

Transmit information from SerialPort to socket.io

I'm having difficulty with integrating socket.io, express, and node.js. I am successfully sending data from an Arduino to my command prompt using the serialport library. Now, I want to display this data on my web browser by utilizing the express libr ...

htmlnode.jsexpresssocket.ionode-serialport

Personalized border color for radio buttons

What is the best way to change the color of my radio button along with its border color when the radio button is selected? My code is functioning properly, except for the border color when the radio button is selected. Below is the CSS code that I have ad ...

htmlreactjscsscss-selectors

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success. Below is an example of my latest try with inline displaying. My goal is to ...

javascripthtmlcss

"Customize the dimensions and scroll behavior of a division

I've been struggling to make a single-page site full-width, and I can't seem to get it right. My goal is to create sections that are: Full width Background image full width The height of the div should be at least the same as the image, adjust ...

htmlcss

Tips for creating a responsive CSS component within a q-card while adding content

Utilizing vue and quasar, I have created this component: <template> <q-layout> <q-page-container style="background-color: #e0e5ea;"> <q-page class="column"> <menu-bar></menu-bar> ...

htmlcssvue.jsquasar-frameworkquasar

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

Always ensure that only one div is visible at a time

I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...

javascripthtmlangularjs

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods ...

htmlcsssafari

Specify the width of one element to always be the same as the width of another

One common challenge is maintaining the width of one element equal to another when the page loads (refer to link description here). However, it becomes tricky when the side width changes, such as resizing the browser window. Is there a way to dynamically ...

javascriptjqueryhtmlcsswidth

Decrease the dimensions of the image while maintaining its width at 100%

I've got a dilemma with the images on my website that are linked from image hosting sites. They all need to be displayed at 100% width, but some of them have huge pixel dimensions which cause slow loading times. Is there a way to resize the images wi ...

javascripthtmlcssimage

Why isn't the z-index functioning properly in Vue.js styling?

I am currently developing a simple component that displays four steps, indicating the current step and allowing users to navigate through them. I want to create a design where these numbers are enclosed within circles that are evenly distributed in a line ...

htmlcssvue.jsz-index

What sets apart Firefox and Chrome when it comes to interpreting the widths of flex items?

Looking to create a column layout using flexbox with three divs that span the full width of their parent container while maintaining a single line height. If the content in the center div overflows, I want it to display an ellipsis at the end. Check out t ...

cssfirefoxflexbox

Styling errors in AngularJS validation code

I am facing an issue with the code below that generates 3 text boxes. When I click on one text box, all 3 of them get focused, despite having different name and label values. <div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]"> <div ...

htmlcssangularjsvalidationng-class

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass