Arrange the items in the Navbar

Can someone please help me with a glitch I'm experiencing that is causing my Navbar items to not align properly? (See Navbar preview)

I have attempted to fix it by adjusting the margin and padding manually, but my lack of Bootstrap knowledge has hindered my success.

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 20px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 10px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9c9a8998a8ddc6d9c6db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'store' %}"> Luffy </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Store</span></a>
    </div>
  </div>
  <div class="form-inline my-2 my-lg-0 mr-auto">
   <a href="#"class="btn btn-warning">Login</a>
   <a href="{% url 'cart' %}">
    <img  id="cart-icon" src="https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png">
    <p id="cart-total">0</p>
   </a>
  </div>
</nav>

Anyone know how to resolve this issue?

htmlcssdjangobootstrap-4navbar

Answer №1

You are facing a small issue with the positioning of your navigation items due to a couple of factors working together. The first thing you need to do is set the position of #cart-total to be absolute so that it appears on top of the icon instead of below it, which is causing the misalignment of the nav items. Additionally, make sure to adjust the height of the .navbar element to provide enough space for correctly positioning your cart total using the top and right properties:

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 20px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 10px;
    /*right here*/
    position: absolute;
    top: 28px;
    right: 20px;
}
/*And here*/
.navbar {
  width: 100%;
  height: 90px;
  

}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150a1508">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'store' %}"> Luffy </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Store</span></a>
    </div>
  </div>
  <div class="form-inline my-2 my-lg-0 mr-auto">
   <a href="#"class="btn btn-warning">Login</a>
   <a href="{% url 'cart' %}">
    <img class="logo" id="cart-icon" src="https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png">
    <p id="cart-total">0</p>
   </a>
  </div>
</nav>

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 radio button value along with the values of all other input fields

$('.cinput').each(function(){ console.log($(this).val()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='radio' name='radiox' class='cinput' v ...

jqueryhtml

A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly? <div class="row"> <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul> <div> ...

htmlcssbootstrap-4

Challenges in Converting HTML String into a jQuery Object and Navigating It

I have created a small script that takes an autoresponder code from a textarea for email marketing. When the textarea loses focus, it should parse the pasted code, extract certain attributes and elements, and place them in separate input fields. However, ...

jqueryhtmlformshtml-parsing

Modify the HTML indentation style in Visual Studio 2008

When working with Visual Studio 2008, I have noticed that it insists on indenting HTML in a specific way: <h1> title</h1> <h2> subtitle</h2> However, I personally prefer the following indentation style: <h1>title< ...

htmlvisual-studiovisual-studio-2008indentation

Connecting the address model to views: A step-by-step guide

Hello! I'm currently working on developing an address form that allows users to choose between a home or shipping address. Here's the model I have so far: from django.db import models from django.contrib.auth.models import User from PIL import I ...

pythondjangodjango-modelsdjango-formsdjango-views

Angular 2: Issue with Input Controls losing value within a form element using ngFor

After developing a page in Angular2 that utilizes a form tag and renders input controls using ngFor within a table tag, I encountered an issue where selected input values are removed upon adding a new row. However, everything works fine when the form tag i ...

htmlangularangular2-templateangular2-formsangular2-directives

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

cssreactjssemantic-uisemantic-ui-react

Creating multiple versions of a website based on the user's location can be achieved by implementing geotargeting techniques

It may be a bit challenging to convey this idea clearly. I am interested in creating distinct home pages based on the source from which visitors arrive. For instance, if they come from FaceBook, I envision a tailored home page for FaceBook users. If they ...

javascripthtmlcssfacebook

Tips for creating an HTML table that fills the entire width of its parent element:

One of the rows in my table contains a nested table. I want both tables to fill up 100% of the width of the parent element. How can I achieve this? Check out the demo here Here's the HTML code: <div class="container"> <table> <tr ...

htmlcss

Redirecting visitors to a specific section of the website as soon as they enter the site

Currently, I am utilizing a jquery plugin known as Ascensor which can be found at this link: This plugin is designed for creating one-page websites with smooth scrolling capabilities both vertically and horizontally. It operates using a coordinate system ...

javascriptjqueryhtmlcss

conflicting character encoding systems

Request normally comes in this format: Parameters: {"utf8"=>"✓", "status_id"=>"12686"} However, from one particular client, the request looks like this: Parameters: {"utf8"=>"\xE2??", "status_id"=>"12686"} As a result, I am encounter ...

htmlruby-on-railsencodingutf-8rack

What could be causing the issue with resizing windows when using a modal?

My modal contains a slider, but it doesn't show up on the screen when the modal is displayed. Interestingly, if I manually resize the window, the slider appears. I looked into this issue and found that others have mentioned it's related to the mo ...

javascriptjquerybootstrap-4bootstrap-modalwindow-resize

Unseen related model fields

I am struggling to figure out what is causing an issue in my code. Can anyone explain why the fields in locations = Location.objects.filter(user=add_profile.user) are not showing up on my html page? models.py class Location(models.Model): user = mode ...

pythonhtmldjango

Implementing bootstrap columns while displaying individual components one after the other

Here is the html code I am currently working with: <label>Search:</label> <input type="text" id="list_search" class="form-control col-8"> <button class="btn btn-info col-2">Search</button> It's interesting to note that ...

htmlcssbootstrap-4frontend

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

javascriptjqueryhtmlcss

Tips for crafting interactive Dropdown menus

Visit this link for more information Hello all, I am a beginner in HTML and Javascript and seeking guidance on how to create dynamic dropdown menus similar to the ones on the provided website. I have successfully implemented the source code, but my questi ...

javascriptjqueryhtmlajax

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

The process of retrieving CSS attributes from a control found by XPath using Selenium IDE

During my Selenium IDE script execution, I am looking to identify and handle an error state. This specific error state is visually highlighted on the page with a select control changing its background color to a light shade of red. The xpath for the selec ...

cssxpathselenium-ide

The insider's guide to understanding the inner workings of the :nth-child() property

I am finding the :nth-child() property to be a bit confusing. Sometimes it takes arguments like :nth-child(2),:nth-child(2n),:nth-child(2n + 1). I'm not sure what these mean exactly - are they referring to even or odd divs, or is there another propert ...

htmlcss

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

javascriptjqueryhtmlcss