The two items are not situated side by side

Trying to make my page responsive, but when I inspect and look into mobile view, the elements do not align next to each other like they do on desktop. https://i.sstatic.net/8WhxD.png

I want the shopping cart icon and button to be positioned next to each other so that my navbar does not look stretched out. Here is my code:

<!-- navbar -->
<!-- Image and text -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #025;">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="{% url 'accounts:home' %}" style="font-size: 25px; font-weight:600;">
      <img src="{% static 'image/logo/logo.png' %}" class="d-inline-block align-text-center logo-img"
        style="margin-left: 150px; height: 40px;">
      BuyBuy
    </a>

    <div class="navbar-nav dekstop_search">
      <form class="form-inline" action="{% url 'products:search' %}">
        {% csrf_token %}
        <input class="search" type="search" placeholder="Search..." aria-label="Search" name="search" required>
        <button class="btn sea btn-outline-primary" type="submit" value="Search"><i class="fas fa-search text-white"></i></button>
      </form>
    </div>

<!-- Links -->
{% if user.is_authenticated %}

  <!-- Right -->
  <div class="navbar-nav">
    <a href="#" class="nav-link text-white text-center"><i class="fas fa-heart"></i>
      <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a href="#" class="nav-link text-white text-center"><i class="fas fa-bell"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <div class="dropdown">
      <img class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="height:50px; border-radius: 50%; margin-right:150px;"
        src="{{ user.profile.profile_pic.url }}">
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li class="item text-center" style="font-weight: bolder;"> Hi <strong
            style="color: #B9C04C; cursor:default;"> {{ user.username }} 👋 </strong></li>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-center" href="{% url 'accounts:profile'  request.user.username %}">My Account</a>
        <a class="dropdown-item text-center" href="{% url 'orders:myorders' %}">My Order</a>
        <a class="dropdown-item text-center" href="#">My Address</a>
        <a class="dropdown-item text-center" href="#">My Cart</a>
        <a class="dropdown-item text-center" href="{% url 'accounts:logout' %}">Log Out</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-center" href="#">Settings</a>
        <a class="dropdown-item text-center" href="#">Help</a>
        <a class="dropdown-item text-center" href="#">Privacy Policy</a>
      </div>
      </div>
  </div>
    {% else %}
      <div class="navbar-nav">
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <a class="nav-link" href="{% url 'accounts:login' %}"><button type="button" class="btn btn-outline-primary text-white">Log In</button></a>
      </div>
    {% endif %}
  </div>
</nav>

Any help would be appreciated. I tried using display inline-block but it didn't have any effect.

htmlcssbootstrap-5

Answer â„–1

To implement a flexible layout, simply add display: flex to the parent <div>:

<div class="navbar-nav" style="display:flex">

Answer â„–2

Great news, your issue has been resolved!

It seems like you were using Bootstrap-5, but encountered issues due to excessive inline styles, missing closing tags, and improper navigation menu structures. These conflicts were affecting Bootstrap's functionality.

To ensure your code works as intended, always adhere to Bootstrap's guidelines.

Allow me to offer some suggestions for optimizing and enhancing your code.

1. Avoid using inline styles and utilize Bootstrap classes instead for styling HTML elements.

**Example:**

    <span class="badge" style="background-color: white; padding:3px;">
        ....
    </span>

Change it to:

    <span class="badge bg-white p-1">
        ....
    </span>

Read: Bootstrap [Background Color][1], [Spacing][2], [Colors][3]

2. Utilize Bootstrap's structure for organizing navigation links efficiently.

    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link text-white text-center">
                <i class="fas fa-heart"></i>
                <span class="badge bg-white text-primary p-1">{{wish|length}}</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link text-white text-center">
                <i class="fas fa-bell"></i>
                <span class="badge bg-white text-primary p-1">{{wish|length}}</span>
            </a>      
        </li>
    </ul>
Read: [Bootstrap Navbar][4]

3. Ensure all tags are properly closed (some tags in your code were left unclosed).

Answer â„–3

Utilize the power of flexbox available in CSS for improved layouts.

Answer â„–4

Consider utilizing the .className { display: flex; } CSS property for achieving a flexible layout

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

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

javascriptcssangular

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

My Tailwind classes are giving me trouble. I faced an issue when I created a new component in the directory and placed my Button component there. Whenever I restart the project in terminal, the styles do not apply to my button unless I manually define th ...

cssnext.jstailwind-css

Creating a gap between two rows within a Bootstrap table

Is there a way to create space between two bootstrap table rows? I am looking for something like this: --------- | A B | --------- --------- | C D | --------- --------- | E F | --------- Here is the code snippet: <script src="https://cdnjs.c ...

htmlcssbootstrap-4row

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

htmlcss

Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards. .product-slider { margin-top: 16px; text-align: center; } .slide-item { list-style-type: none; display: inline; ...

htmlcsshtml-lists

Is it possible to control my CSS using ModX Resources?

I have recently been experimenting with the ModX Revolution manager and had a question about converting my CSS into ModX Resources instead of files. I am interested in utilizing Templates and their variables as well. Do you know if this is possible? Also, ...

cssmodxmodx-revolutionmodx-templates

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

javascripthtmlreactjsnpmreact-hooks

Finding and choosing a date from an ng-model datepicker using Selenium Webdriver - a guide

I am encountering an issue where I can open the date picker pop-up calendar with a click, but I cannot select a specific date from it. This is due to the input field being read-only, which means that any input provided through sendkeys or JavascriptExecuto ...

jqueryhtmlangularjsseleniumselenium-webdriver

Utilizing itemprop tag independent of itemtype declaration

My question is whether it's possible to use the itemprop attribute without using the itemtype. Can this be done? If so, how does using these attributes impact SEO? Is it recommended to always use itemtype? I assume it would be beneficial, but what if ...

htmlseomicrodata

What are the best practices for creating a contemporary website that functions effectively on IE7?

After creating several websites for my clients, I discovered that they are not functioning well in IE7. Unfortunately, there is still a small percentage of people using IE7. Can anyone suggest a super quick solution to fix this issue? Feel free to recomm ...

javascripthtmlcssinternet-explorer-7cascade-framework

Instructions for creating scrollable MaterializeCSS tabs when there are too many tabs to fit within the width of the container without scrolling

Here is an example code (SSCCE) that showcases the issue I am facing. The MaterializeCSS frontend framework documentation states: Scrollable Tabs Tabs automatically become scrollable Source However, when I attempt to use more tabs than can fit on the ...

jqueryhtmlcssmaterial-designmaterialize

Guide on making a button for adding products to the shopping cart

I have put together this web page Check out the views.py code below: from django.shortcuts import render from django.http import HttpResponse from .models import Pizza # Managing views here. def index(request): pizzas = Pizza.objects.all().order_by( ...

htmldjangodjango-viewsdjango-templatespycharm

What is the best way to send a parameter to a component in Vue.js without including it in the URL during routing?

One of my Vue.js components is a SideBar that retrieves JSON data. The JSON data consists of names that correspond to specific URLs which in turn contain more JSON data. { "applicants": "url1", "applications": "url2" ...

javascripthtmlvue.jsnpm

maintaining the alignment of three div elements

I am struggling to keep three divs side by side within a container, each containing an image and text below it. I had this layout working perfectly before, but now the right div falls underneath the other two when the screen size is reduced, followed by th ...

htmlcss

When a new entry is added to the database, automatically refresh a <div> section within an HTML document

I have a basic webpage that showcases various products stored in the database. My goal is to implement an updater feature where, if a user adds a new product, the page will automatically display the latest addition in a specific div. I attempted to refere ...

phpjavascripthtmlajax

Can someone assist me in figuring out how to solve selecting multiple radio buttons at once

<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...

javascripthtmlcssradio-button

Step-by-step guide to applying a CSS class to a grid cell using Syncfusion

Is there a way to define a specific style for a cell using the Syncfusion grid grouping control? I attempted the code below, but it doesn't seem to be effective in my webform. tdescriptor.Columns[0].Appearance.AnyRecordFieldCell.CssClass = "hideColum ...

cssgridcellsyncfusion

Highlight particular terms (key phrases) within text contained in a <td> tag

I am currently working on a project and facing a challenge that I am unfamiliar with. My task is to highlight specific keywords within text located inside a <td> element. I cannot manually highlight the keywords as the texts are dynamic, originating ...

javascriptjqueryhtmljsp

Creating a list of definitions in the form of an HTML table using a multidimensional array in

Currently, I am tackling the following challenge: I must create a public static buildDefinitionList() method that produces an HTML list of definitions (using <dl>, <dt>, and <dd> tags) and then returns the resulting string. If the array c ...

javahtmlarraysmultidimensional-arraystringbuilder