Issue with navigation bar small box alignment on the left side

Hey there! I'm relatively new to bootstrap and html, and I've encountered an issue with my navbar setup. When I create my navbar, a small box appears on the left side of my screen.

Here's an example

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>VENDER</title>

   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
</head>

   <body>

   <!-- STYLE -->
   <style>   
   body {
   background-color: white;
   }
   </style>

    <!-- INFO -->
    <div class="top-container-fluid"> 
    <div class="row">
    <p class="headertext"><b>  Insert Your Text Here! </B></p>
    </div>
    </div>



    <div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
    <div class="navbar-header">
    <a href="/" class="navbar-brand">Your Brand Name Site</a>        
    <button class="navbar-toggle" data-toggle="collapse" data-
    target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div>
    </div>
    </div>

    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <script src="js/bootstrap.min.js"></script>

</body>

Answer №1

The reason for the issue you are facing is simply a typo in the class name.

Make sure to use the correct class name which should be navbar-toggler instead of mistakenly using "navbar-toggle".

In Bootstrap 4, there is no need to include any

<span class="icon-bar"></span>
as all necessary features are already built-in.

Here's an example code snippet that uses the correct classes:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      &...
    </ul>
    &...
  </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>

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 send multiple values to a PHP function through an AJAX request?

I wrote the following code snippet: var name= "theName"; var surname= $('#surname').val(); $.ajax({ url: 'SaveEdit.php', type: 'post', data: { "callFunc1": whichOne}, success: funct ...

Tips on aligning the height of the vertical 'b-tabs' navigation section with the content section based on the content's height

I am trying to retrieve the value of max-height from a different source (such as vue data:) and then apply it to the navigation section of the b-tabs. I understand that I can create a CSS class and assign it to nav-class in order to modify the style of the ...

Form submissions are not saving checkbox answers

As a beginner, I'm struggling to save the checkbox answers on the page after submission. The code below is quite lengthy (checkboxes start at 314). I have a feeling that I might be missing a piece of code, but I just can't seem to pinpoint what i ...

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly i ...

Creating a dynamic webpage where multiple images are displayed on a single canvas using

I'm currently working on a chess project where I'm using a canvas to create the game board and draw 32 chess pieces on it. To update the screen when a piece moves, I've implemented requestAnimFrame. However, I'm facing an issue where th ...

Ways to disable the ability to close a bootstrap modal by pressing the backspace key

How can I enable the backspace button in a Bootstrap Modal form for textboxes and textareas? $('body').keydown(function (e) { if ($('#myModal').is(':visible')) { if (e.keyCode == 8) { retu ...

Creating collapsible items in Bootstrap

When using the standard bootstrap collapse tool, I encountered an issue: <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> ...

Limit the amount of text displayed on the main section of the webpage

I am working on creating a simple webpage with three different sections styled like this: .top { position:absolute; left:0; right:0; height: 80px; } .left { position:absolute; ...

I am selecting specific items from a list to display only 4 on my webpage

I am trying to display items from a list but I only want to show 4 out of the 5 available items. Additionally, whenever a new item is added, I want it to appear first on the list, with the older items following behind while excluding the fifth item. Despi ...

Display content exclusively within a modal specifically designed for mobile devices

I want to implement a feature where a button triggers a modal displaying content, but only on mobile devices. On desktop, the same content should be displayed in a div without the need for a button or modal. For instance: <div class="container&quo ...

Ways to remove the uploaded document

I have been tasked with uploading a file. The file comes with a remove button, which can be pressed to delete it. Below is the code I used: The code snippet is as follows: <div id="main"> <p id="addfile1">Add File</p> <div id ...

Utilize ASP to limit the application of a CSS file exclusively to the child page

My website consists of a master page and several child pages. I have created specific CSS classes for styling. However, I only want certain child pages to utilize these styles while the master page should always use them. How can I limit the access to th ...

Bring your Electronic Catalogue to life with the addition of dynamic HTML content showcasing the latest

I am creating a digital magazine but I am facing the challenge of having to deal with 200 pages in jpg format. To streamline the process, I am looking for a way to use a combination of JavaScript and PHP to avoid manually coding for each of the 200 pages. ...

When using Ruby on Rails, the image_tag method generates two <img> tags within my HTML code

I recently started learning Ruby on Rails and encountered an issue with resizing images using CSS. After replacing an image field with the Ruby image_tag, I noticed extra blank space below the image. Upon inspecting the element, I found two tags for the s ...

Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

I am facing a situation where I have a table with multiple lines as shown below: <table> <tr id="line1"><td>Line</td><td>1</td></tr> <tr id="line2"><td>Line</td><td>2</td></t ...

The positioning of the menu icons varies

When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing su ...

Sending various values to a JavaScript function

I am working with a function that looks like this: //Function Call with Single Parameter responses(baseURL); //Function Definition function responses(baseURL) { $.ajax({ url: baseURL, type: "get", cache: false, header ...

The arrangement of columns is not correctly aligned

My website layout is giving me trouble. I want to create a three column design, but unfortunately, it's not aligning properly. Each subsequent column is being pushed down slightly more than the previous one. Is there any way to fix this issue? Interes ...

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...