Achieve a consistently displayed shopping cart icon on the right side of the menu with Bootstrap

I have attempted to ensure that the shopping cart icon always appears on the right side of the screen for mobile, tablet, and desktop users using Bootstrap. However, I am facing issues with responsiveness. How can I ensure that the shopping cart icon always appears on the right side? 

    <div class="shopingicons mr-auto">

        <a href="cart.html" class="icons-btn d-inline-block bag">
          <span class="icon-shopping-bag"></span>
          <span class="number">2</span>
        </a>

      </div>

Here is a demo link: https://jsfiddle.net/nvk87are/9/

cssbootstrap-4angular-ui-bootstrap

Answer №1

If you want to enhance your navbar code, simply add the following code right after the closing </ul> tag. I've tested it on your code and it functions perfectly.

<div style="float:right">
  <div class="shopingicons mr-auto">           
    <a href="cart.html" class="icons-btn d-inline-block bag">
      <span class="icon-shopping-bag"></span>
      <span class="number">2</span>
    </a>
            
          </div>
        </div>

Need further assistance? Feel free to reply and inquire again

Answer №2

When your website is viewed on a smaller screen, the navbarResponsive is hidden. However, in larger view, it suddenly appears and covers up your cart icons.

To fix this issue, consider swapping the positions of your #navbarResponsive and .shoppingicons. See this helpful screenshot for reference.

For a demonstration, you can view this working demo.

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

Changing the Row's Background Color in Angular When the Button is Clicked

My code includes a list where each row has a button to open a sidebar. Due to the large number of elements in the list, I want the background color of the row to turn yellow when the button is clicked, as a way to indicate what has been selected. Currently ...

javascripthtmlcssangulartypescript

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Issue with FlexSlider 2 and thumbnail slider: Previous and Next buttons not functioning for main image

I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even cl ...

javascripthtmlcsscarouselflexslider

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

javascripthtmlcssreactjstypescript

What is the process for incorporating a button to the left of the search field?

Is it possible to enhance the search field by adding a button to make it more user-friendly? Below is the code I have been using: <div id="search"> <div class="container"> <h1>Search U.K. house price data</h1> <form c ...

htmlcsstwitter-bootstrap

What is the best way to transform SASS into CSS?

Looking for an online tool to easily convert a few lines of SASS into pure CSS. Despite searching on Google, all the links I found talk about converting CSS to SASS. Below are the specific lines I need assistance in converting to CSS: =text-shadow($color ...

csssass

Embracing right-to-left (RTL) languages

I am looking to create a website that can support both left-to-right (LTR) and right-to-left (RTL) languages seamlessly. My goal is to have the text direction switch automatically to RTL if the content is in an RTL language. Additionally, I want the input ...

javascripthtmlcssright-to-left

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

Adjusting print page size according to the class of a specific element using CSS

I am currently working on a single page application and I have the need to print the page with either landscape or portrait orientation based on the class of a specific div element. The challenge is that I want to achieve this using only CSS and without an ...

htmlcss

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

I've been trying to find a solution to remove the annoying blue highlight box that appears when dragging on the canvas while using fabric js, but so far I haven't had any luck. I've tried the following code, but it only works for text and n ...

javascriptjqueryhtmlcssfabricjs

Display or conceal div elements using JavaScript

Is there a way to hide certain divs when clicking on a specific div box? Clicking on the box will trigger the hiding of some application divs. See the first image below: When the boxes are hidden, the other divs will readjust in place of the current divs ...

javascripthtmlcsstwitter-bootstrap

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

javascriptjqueryhtmlcss

Using the combination of Chrome browser, Lucida Grande font, and word-wrap

Recently, I encountered a unique situation in Chrome where an odd combination of styles led to an issue. To help illustrate the problem, I created a fiddle which can be viewed here: http://jsfiddle.net/C3CbF/1/ This particular issue is only visible if you ...

cssgoogle-chrome

Looking to create a helpful assistant for navigating my configurator tool?

I have implemented a configurator on my website that allows visitors to drag and drop elements to a specific area. Now, I am looking to add a user-friendly "helper" feature to guide visitors through the process. I came across this example and thought it wo ...

javascriptjquerycss

The width of Bootstrap select inputs seems to be shorter compared to other text input fields

I am encountering a strange issue with bootstrap. Here is an image of the inputs : https://i.sstatic.net/EM4gp.png Here are my codes : <div class="col-2 list_sidebar p-2"> <div class="row"> <div class="f ...

bootstrap-4bootstrap-5

Apply a background image to the input[type='submit'] along with text

<input name="submit" type="submit" value="Search" class="button search"> Is it feasible to incorporate a CSS gradient using background-image: and still display the text within the value attribute? Whenever I introduce a background-image, it conceal ...

htmlformscss

Enhancing font awesome brand icons with tooltip functionality

I've been incorporating font awesome brand icons like fab fa-css3-alt, however, I'm facing difficulty in adding tooltips on hover. I've tried using the title attribute and data-toggle attribute based on some suggestions, but unfortunately, t ...

cssbootstrap-4font-awesome

Creating a span element to replace the list item class in a JavaScript Modal Pop-up

I recently set up a portfolio website that showcases my projects. When you click on a project, a modal window opens with a carousel gallery inside. On my .html page, the projects are organized like this: <li class="Project" data-modal="myModal_1"> ...

javascripthtmlbootstrap-4

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS. <div class="switch&q ...

javascripthtmlcsscheckboxonchange