What is the best way to keep the cart icon in the navbar consistently positioned for both desktop and mobile displays?

I am currently working on customizing a Bootstrap navigation bar using CSS to ensure that the shopping cart icon remains on the right side of the bar on both desktop and mobile devices. Despite my efforts to arrange the elements in various ways, the CSS "order" property does not seem to have any effect.

Below is the mobile navigation bar with the desired layout: https://i.sstatic.net/J9YEf.png

And this is the desktop navigation bar configuration that is not correct: https://i.sstatic.net/pTV0E.png

Here is the code snippet I am using:

@media (min-width: 576px) {
    nav #nav-cart {
        order: 3;
    }

    nav #nav-menu {
        order: 2;
    }

    .nav-item {
        margin-bottom: -4px;
    }
}

nav {
    background-color: #a8d0b2;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    flex: auto;
    font: lighter 1.5rem 'Buxton Sketch', sans-serif;
}

nav #nav-cart {
    order: 2;
}

nav #nav-cart img {
    max-height: 32px;
}

nav #nav-header {
    order: 1;
}

nav #nav-menu {
    order: 3;
}

nav #nav-toggle {
    order: 0;
}

.navbar-brand {
    font-size: 22px;
    white-space: normal;
    text-align: center;
    word-break: break-all;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c776a776a">[email protected]</a>/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4f435e496c1e021d1d0214">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c110c11">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light mb-3">
    <div class="container">

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

        <a id="nav-header" class="navbar-brand" asp-area="" asp-page="/Index">
            <img alt="Home" src="placeholder.webp" />
        </a>

        <a id="nav-cart" class="nav-item nav-link text-light" asp-area="" asp-page="/Cart">
            <img alt="Cart" src="assets/shopping_cart_25x24.webp" />
        </a>

        <div id="nav-menu" class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-light" asp-area="" asp-page="/Shop">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" asp-area="" asp-page="/About">About</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

Is there a mistake in my implementation, or is there a specific reason why it is not working as intended?

htmlcssbootstrap-5navbar

Answer №1

If you want to adjust your media query for small screens with a maximum width of 576px, you need to make the following changes outside the media query:

@media (max-width: 576px) {
    
    nav #nav-cart {
        order: 3;
    }

    nav #nav-menu {
        order: 2;
    }

    .nav-item {
        margin-bottom: -4px;
    }
}

nav {
    background-color: #a8d0b2;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    flex: auto;
    font: lighter 1.5rem 'Buxton Sketch', sans-serif;
}

nav #nav-cart {
    order: 3;
}

nav #nav-cart img {
    max-height: 32px;
}

nav #nav-header {
    order: 1;
}

nav #nav-menu {
    order: 2;
}

nav #nav-toggle {
    order: 0;
}

.navbar-brand {
    font-size: 22px;
    white-space: normal;
    text-align: center;
    word-break: break-all;
}
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562338253825">[email protected]</a>/dist/css/bootstrap.min.css">
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99a968b9cb9cbd7c8c8d7c1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde0fde0">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
  <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light mb-3">
    <div class="container">

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

        <a id="nav-header" class="navbar-brand" asp-area="" asp-page="/Index">
            <img alt="Home" src="placeholder.webp" />
        </a>
        <a id="nav-cart" class="nav-item nav-link text-light" asp-area="" asp-page="/Cart">
            <img alt="Cart" src="assets/shopping_cart_25x24.webp" />
        </a>

        <div id="nav-menu" class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-light" asp-area="" asp-page="/Shop">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light" asp-area="" asp-page="/About">About</a>
                </li>
            </ul>
        </div>

    </div>

Answer №2

Everything is going well except for the fact that the @media rules are being overridden by later code, resulting in a different order on desktop screens:

  • #nav-header { order: 1; }
  • #nav-cart { order: 2; }
  • #nav-menu { order: 3; }

To rectify this, the entire @media block should be placed at the end:

nav {
  background-color: #a8d0b2;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
  flex: auto;
  font: lighter 1.5rem 'Buxton Sketch', sans-serif;
}

nav #nav-cart {
  order: 2;
}

nav #nav-cart img {
  max-height: 32px;
}

nav #nav-header {
  order: 1;
}

nav #nav-menu {
  order: 3;
}

nav #nav-toggle {
  order: 0;
}

.navbar-brand {
  font-size: 22px;
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

@media (min-width: 576px) {
  nav #nav-cart {
    order: 3;
  }
  nav #nav-menu {
    order: 2;
  }
  .nav-item {
    margin-bottom: -4px;
  }
}
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light mb-3">
  <div class="container">

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

    <a id="nav-header" class="navbar-brand" asp-area="" asp-page="/Index">
      <img alt="Home" src="placeholder.webp" />
    </a>

    <a id="nav-cart" class="nav-item nav-link text-light" asp-area="" asp-page="/Cart">
      <img alt="Cart" src="assets/shopping_cart_25x24.webp" />
    </a>

    <div id="nav-menu" class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
      <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
          <a class="nav-link text-light" asp-area="" asp-page="/Shop">Shop</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-light" asp-area="" asp-page="/About">About</a>
        </li>
      </ul>
    </div>

  </div>
</nav>



<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010657e637e63">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3aeb3ae">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

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

obtain the equivalent offsetX value for touch events as for mouse events

Greetings! I am currently attempting to retrieve the offsetX and Y values of a touch event, which ideally should match the offsetX value of a mouse event. In order to achieve this, I have implemented the following code: ev.offsetX = ev.targetTouches[0].p ...

javascripthtmlcanvas

What methods can I use to prevent a user from accidentally double clicking a link within an email?

After users request a password reset, they are sent an email containing a link to create a password reset code. This link remains valid for 24 hours and can be utilized multiple times within that time frame to generate new codes in case the initial one is ...

htmlemailhyperlinkclickdouble

tips for organizing the <div> element horizontally within a design

I have reviewed some similar questions that have been posted and attempted to apply their solutions to my code. However, I am still encountering difficulties. Below is the code that I need help with. I am looking to organize the main content along with t ...

htmlcss

Developing a unified input element containing numerous fields

After @grateful answered this question, I wanted to elaborate in case it could benefit others... In my project, there's a page called rsetup.php which has some PHP code to access a MySQL database for filling the HTML content of the page. This HTML ge ...

javascriptphpmysqlcss

What is the best way to create text boxes that can expand and collapse within a UIWebView?

I am looking to present text in a UIWebView with expandable or collapsible boxes that contain titles. The user should be able to tap the bar of a collapsed box to expand it. Is there a simple solution available that can be easily integrated into a local ...

javascripthtmluiwebview

GWT encrypted CSS class names not being correctly applied

I recently encountered a strange issue with GWT styles. While using UiBinder and programmatically styling my GWT widgets, I ran into the following scenario: <ui:UiBinder xmlns:ui="..." xmlns:g="..."> <ui:style src="bindings.css"/> ...

cssgwtuibinderflextable

Utilizing margins in CSS for various div elements

Update: I have included Javascript and Masonry tags in my project. Despite having modules of the same size, I am exploring how masonry can assist me. However, I find it a bit puzzling at the moment as I am not aiming to align elements of different sizes. I ...

javascriptcssjquery-masonry

Connecting Documents and Organizing Folders

Currently, I am immersed in a web project leveraging java/ jsp/ servlets/ html/ css within Eclipse Tomcat. At the core of this project, all files are nestled neatly within the WebContent folder. Within my jsp files, I have encountered an issue when trying ...

javacsseclipsejsptomcat

Configuring ng-options with personalized indices

I am a beginner learning AngularJS and I'm working on setting up ng-options with unique indexes. In my tables, I want to use the Primary Key as the index. For example, if the Primary Keys are 1, 3, 4, 5, I only want those indexes in my select. First ...

htmlangularjsselectng-options

oj-select-one displays a comprehensive list of values in the dropdown

Typically, oj-select-one will only display the first 15 values before requiring the user to search for more. Is there a way to show all values in the dropdown list without needing to use the search function? I attempted to use minimumResultsForSearch as s ...

javascripthtmloracle-jet

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

I have a segment with six elements. For desktop, I would like to display 3 items per row; for medium devices, 2 items per row; and for mobile devices, only 1 item per row. <div class="flex-container"> <div>1</div> <div>2</d ...

htmlcssflexbox

Calculating the time gap between two consecutive "keyup" occurrences

I am in need of creating a basic point of sale system using Javascript. I have a barcode scanner that functions like a keyboard. My goal is to automatically identify when the input is coming from the barcode scanner and then generate a report with the sc ...

javascriptjqueryhtmltime

What causes jquery to malfunction when making an ajax call?

UPDATE #2: I am experiencing a similar issue to this one, although it is not related to WP: . How can I implement this with my scripts? UPDATE: The main problem arises when the page is initially loaded, everything works smoothly and ajax is not triggered. ...

jqueryhtmlajax

Is Sass only compatible with Ubuntu for monitoring once?

After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...

javascripthtmlcsssasswatch

Configuring Dialog Placement to the Top in Material-UI

I'm in the process of creating a popup dialog, but I'm encountering an issue where the dialog pops up in the center of the page. How can I position it at the very top of the page when the popup button is clicked? Below is the code snippet: < ...

javascripthtmlcssreactjsmaterial-ui

Python Selenium Webdriver: Dealing with the NoSuchElementException

I've encountered a strange situation while using Selenium Webdriver for Python on the Chrome browser. My goal is to extract information from Pipedrive, where I can successfully log in and search for a specific lead on the webpage. However, when I atte ...

pythonhtmlselenium-webdriverweb-scraping

Unable to modify the focus outline for .custom-control-input within Bootstrap 4

After spending countless hours attempting to change the focus outline color of the custom bootstrap controls, I have hit a roadblock. Changing the background is a breeze with: .custom-control-input:checked~.custom-control-indicator { background-color: re ...

cssbootstrap-4

CSS - image does not adhere to max-height when placed in a fluid container - link to jsFiddle

For instance: http://jsfiddle.net/vjqjv/7/ I am facing an issue with an image inside a container (refer to #slider-section in the jsFiddle) that has a fluid height and a set max-height. I have defined max-height and max-width for my image as 100% (check ...

imagecss

Flex Display with Bootstrap for Responsive Tables

Is there a way to display the scrolling of a Bootstrap table using a flex container? https://getbootstrap.com/docs/4.4/content/tables/#responsive-tables I am looking for the JSFiddle example with DIV elements. Removing the display:flex from .flex_containe ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

In the event that conflicting media queries take precedence over one another

I developed a set of queries for a particular element on a landing page. Here is the HTML structure: <div class="hsContent"> <article> This is my amazing content. Wow! </article> </div> This is how the initial styling looks fo ...

htmlcssmedia-queries