Steps to eliminate the gap between the link element and toggler in Bootstrap 4

Incorporating the code below will create a navigation bar with a cart icon in Bootstrap 4, indicated by the images. The expanded view showcases the cart next to the search section on the right. When viewed on smaller devices in collapsed mode, it should align to the left of the toggler.

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

Currently, there is a considerable gap between the cart icon and the toggler as depicted here.

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

The desired outcome is illustrated in this image.

https://i.sstatic.net/8i4Qf.png

Below is the full implementation:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light pr-lg-4">
      <a class="navbar-brand" href="#">Navbar</a>
      <a href="#" class="moving-cart"><i class="fa fa-shopping-cart" style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i></a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

CSS Styling:

@media (min-width: 992px) {
    .moving-cart {
    position: absolute;
    right: 0;
  }
}

@media only screen and (max-width: 990px) {
  .moving-cart {
    margin-right: 0;
  }
}

View a live demonstration here. Any assistance would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

  • Removed the icon from the navigation element that collapses at a width less than 992px
  • Assigned an id to the icon for styling and set its position to absolute
  • Moved the icon close to the search button
  • Implemented media query to bring the icon near the "Hamburger" button when the navigation collapses

See HTML code below:

<body>
     <i id="responsive-icon" class="fa fa-shopping-cart" style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i>
<nav>
..
</nav>
..
</body>

See CSS code below:

#responsive-icon{
  display: inline-block;
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 1;
}

@media (max-width:991px){
  #responsive-icon{
    right: 100px;
  }
}

Answer №2

You must make changes to the following portion of code. Simply add a wrapper div around Icon and button

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light pr-lg-4">
  <a class="navbar-brand" href="#">Navbar</a>
      <div>
      <a href="#" class="moving-cart"><i class="fa fa-shopping-cart" style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i></a>
    
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      </div>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    
    
  </div>
</nav>
    
    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Answer №3

To adjust the positioning of your .moving-cart, you can set it as absolute and specify the desired space using the right property.

.moving-cart {
    margin-right: 0;
    position: absolute;
    right: 100px;
    top: 15px;
}

Check out the example here: https://codepen.io/anon/pen/MBoEWB

Answer №4

To avoid the need for custom CSS code, you can simply enclose the toggler-icon and shopping-cart within an order-last container.

<div class="order-last">
  <a href="#" class="moving-cart">
    <i class="fa fa-shopping-cart"
       style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse"
          data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02"
          aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</div>

Visit this link for more information.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light pr-lg-4">
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="order-last">
        <a href="#" class="moving-cart">
          <i class="fa fa-shopping-cart"
             style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02"
                aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

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

Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a ...

jqueryhtmlcssfine-uploader

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

CSS: Strategies for eliminating empty cells within a grid layout by filtering out rows that contain partial or incomplete content

I am in need of creating a grid layout where each div is a specific width, and the number of rows depends on how many items there are. The twist is that I am unsure of the width of the outer container. My initial solution was to use CSS grid: #container ...

javascripthtmlcsscss-grid

Enhancing list item appearance by replacing bullets with Font Awesome icons

I need to create a list similar to this example https://i.sstatic.net/w84xS.png Although I successfully replaced the bullet with a fontawesome icon, the result is not quite right as shown here https://i.sstatic.net/yqnbJ.png You may notice a difference ...

csshtmlfont-awesome

Ensure that Bootstrap4 cards are fully stretched to a width of 100%

Does anyone know how to make Card2 and Card3 in Bootstrap4 stretch to 100% width? Card1 defines the total height, but Card2 and Card3 are not taking up the full remaining width. Card1 is already stretched, but Card2 and Card3 are inside a flex column and a ...

htmlcsstwitter-bootstrap

retrieving a JSON attribute that requires an additional HTTP call

Greetings, I have a dilemma related to Angular and a JSON file that I would like to share. Here is a snippet of the JSON data: { "users": [ { "gender": "male", "title": "mr", "first": "francisco", "last": "medina", "street": "2748 w dallas st", "c ...

htmlangularjsjson

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Aligning text and checkboxes for perfection

Looking for a solution to align text and checkbox without using a blank image; I have the following HTML code: <span><b>System Type</b></span> <img src="~/Content/images/blank_img.png" alt=" ...

htmlcss

How to Adjust the Padding of Tree Row in GWT?

Have you ever seen a GWT tree before? It sort of resembles the following structure: <div class="gwt-Tree"> <div style="padding-top: 3px; padding-right: 3px; padding-bottom: 3px; margin-left: 0px; padding-left: ...

javacssgwttree

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

Implementing the CSS link tag in the header of a NextJS 13 application for enhanced styling

In my Next 13 application, I'm looking to link directly to a basic CSS file. Unfortunately, adding it to the Head component hasn't yielded any results for me. I've also attempted to create a custom _document within both the app and pages, bu ...

cssnext.jsnext.js13

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascriptjqueryhtmlcssinput

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

javascripthtmljquery

An easy CSS conundrum when hovering

Looking for some assistance with CSS. I want to display the text "Featured Page" with a picture appearing on the right side upon hovering (mouseover). Currently, the picture shows up under the text using the following CSS, but I need it to be larger and pl ...

c#javascripthtmlcss

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

htmlcssparticles.js

The A-frame inspector tool is not very useful within the Glitch platform

Just want to preface this by saying that I am completely new to both a-frame and Stack Overflow. Lately, I've been experimenting with A-frame templates similar to the one linked here: When I pull up the inspector for the example above (ctrl-alt-i), ...

htmlaframe

Getting error messages for form validation in CodeIgniter when using Fileupload via Ajax can be tricky. Here are

Hello, I am currently working on retrieving form errors for an input type file in CodeIgniter. I have created a Javascript code that utilizes Ajax to submit the details as shown below: var name = $("#name").val(); var des = $("#des").val(); var img=$("#fi ...

phpjqueryhtmlajaxcodeigniter

Conceal overflow in SVG after stroke is applied to top rectangle border

Is there a way to conceal the overflowing red color in this SVG? I attempted repositioning it before the rect with the stroke, but that didn't solve the issue. Check out the code and screenshot below. <br><br> <svg _ngcontent-fdl-c1 ...

javascripthtmlsvg

Retrieving HTML array values using jQuery

Presented below is an array of input boxes. <form> 9 <input type="checkbox" name="date[]" value="9"> 10 <input type="checkbox" name="date[]" value="10"> 11 <input type="checkbox" name="date[]" value="11"> </form> The o ...

jqueryarraysajaxhtml

"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...

htmlcssreactjsalignment