Bootstrap 4's hamburger icon in the navbar toggler displaying only two lines, rather than three

I have created a navbar using Bootstrap 4.

Although the navbar is functional, I am facing an issue that I have not been able to resolve on my own.

When collapsed, the hamburger icon only displays two lines instead of three. I suspect that the problem lies within the pseudo elements.

I have spent hours trying to troubleshoot this issue. Could someone please review my code and help me identify what I am doing wrong?

Here is the link to the fiddle: fiddle

Below is a section of my code:

nav {
  padding: 20px 0 20px;
  margin-bottom: 20px;
  margin-top: 20px; }
  
  .navbar {
  padding: 0; }

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: none; }

... (code continuation) ...
... (additional code blocks and links) ...

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired effect on the third line, you can utilize the border-bottom property on the 

.navbar-custom .navbar-toggler-icon
selector. Don't forget to include the check snippet for reference.

nav {
  padding: 20px 0 20px;
  margin-bottom: 20px;
  margin-top: 20px; }
  
  .navbar {
  padding: 0; }

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: none; }

.navbar-custom .navbar-toggler-icon {
  width: 24px;
  height: 17px;
  background-image: none;
  position: relative;
  transition: all 300ms linear; 
    border-bottom: solid 2px #000;
  }

.navbar-custom .navbar-toggler-icon:after,
.navbar-custom .navbar-toggler-icon:before {
  width: 24px;
  position: absolute;
  height: 2px;
  background-color: #000;
  top: 0;
  left: 0;
  content: '';
  z-index: 2;
  transition: all 300ms linear; }

.navbar-custom .navbar-toggler-icon:after {
  top: 8px; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(45deg); }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: translateY(8px) rotate(-45deg); }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  border-color: transparent; }

/* Additional styles for different elements */

.nav-link {
  color: #4b4b4b;
  font-weight: 500;
  transition: all 200ms linear; }

.nav-item:hover .nav-link {
  color: #3b3b3b; }

.nav-item.active .nav-link {
  color: .nav-item.active .nav-link #c2002d; }

/* More styles for different elements */


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <title></title>
  </head>

 <body>
      <nav class="navbar navbar-custom navbar-expand-md ">
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#" >Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Browse</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
          </nav>

Answer №2

In my opinion, incorporating an additional element in the center would enhance the overall appearance, especially when animated :-)

nav {
  padding: 20px 0 20px;
  margin-bottom: 20px;
  margin-top: 20px; }
  
  .navbar {
  padding: 0; }

.navbar-toggler:active,
.navbar-toggler:focus {
  outline: none; }

.navbar-custom .navbar-toggler-icon {
  width: 24px;
  height: 30px;
  background-image: none;
  position: relative;
  transition: all 300ms linear; 
}

.center {
  width: 100%;
  height: 2px;
  background-color: red;
  position: absolute;
  left: 0px;
  top: 4px;
}

.navbar-custom .navbar-toggler-icon:after,
.navbar-custom .navbar-toggler-icon:before {
  width: 24px;
  position: absolute;
  height: 2px;
  background-color: #000;
  top: 0;
  left: 0;
  content: '';
  z-index: 2;
  transition: all 300ms linear; }

.navbar-custom .navbar-toggler-icon:after {
  top: 8px; }

.navbar-toggler[aria-expanded="true"] .center {
  display: none;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
  transform: rotate(45deg); }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
  transform: translateY(8px) rotate(-45deg); }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  border-color: transparent; }

.nav-link {
  color: #4b4b4b;
  font-weight: 500;
  transition: all 200ms linear; }

.nav-item:hover .nav-link {
  color: #3b3b3b; }

.nav-item.active .nav-link {
  color: .nav-item.active .nav-link #c2002d; }

.nav-link {
  position: relative;
  padding: 5px 0 !important;
  display: inline-block; }

.nav-item:after {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #c2002d;
  opacity: 0;
  transition: all 200ms linear; }

.nav-item:hover:after {
  bottom: 0;
  opacity: 1; }

.nav-item.active:hover:after {
  opacity: 0; }

.nav-item {
  position: relative;
  margin-left: 50px;
  transition: all 200ms linear; }

.navbar-brand > img {
  display: block; }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <title></title>
  </head>

 <body>
      <nav class="navbar navbar-custom navbar-expand-md ">
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon">
            <span class='center'></span>
          </span>
        </button>

<div class="collapse navbar-collapse" id="navbarDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link " href="#" >Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Browse</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
          </nav>


</body>

</html>

Answer №3

Here are a couple of modifications you can make to your CSS and HTML: 

nav {
  padding: 20px 0 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* Other CSS modifications here */


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title></title>
</head>

<body>
  <nav class="navbar navbar-custom navbar-expand-md ">

    <button class="navbar-toggler collapsed ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item ">
          <a class="nav-link " href="#">Home</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="#">Browse</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="#">Search</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </nav>

</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

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

I'm currently working on a project that requires me to incorporate two drop-down menus inside the search box. Despite following the guidelines provided in the documentation (https://ant.design/components/input), I encountered a problem when trying to ...

cssreactjstypescriptantd

A picture resting on the left side of the text

I'm struggling to align images to the left of text within a div. When the screen is smaller than 768px, I want the images to stack on the left side of the text, with a maximum width of 150px. I've tried using float: left and adjusting the displa ...

htmlcsslayoutbootstrap-4

Unable to pick out particular elements from the information stored in <?!=JSON.stringify(dataFromServerTemplate) ?>

I am facing an issue with the JSON format. Being new to this, I am struggling to identify the root of the problem. In my Google App Script, I have a doGet function that looks like this: function doGet() { var htmlTemplate = HtmlService.createTemplateF ...

javascriptjsonhtmlgoogle-apps-script

Exploring the Intersection of HTML5 File API and AJAX Chunked Uploads

Recently, I created a drag and drop multiple file upload feature with individual progresses, which has been working well. However, there is one issue that I have encountered. During the uploading of larger files, sometimes the browser freezes until the upl ...

ajaxhtmluploadfilereaderchunking

Is it possible to customize the appearance of a toast notification using Toastr beyond the default settings? If so, what options are available for creating

Working with Angular 9 and ngx-toastr has presented me with an interesting challenge. I am tasked with creating custom toast styles that differ significantly from the default ones provided by toastr. Each toast in the set will have unique border colors, f ...

cssangularuser-interfaceangular9toastr

Modifying the color of table rows using HTML and CSS

Seeking guidance on HTML and CSS with a simple query. How can I assign different colors to each row in a table? For instance, row 1 as red, row 2 as blue, and so on. Here is my HTML code: #table { font-family: Arial, Helvetica, sans-serif; width: ...

htmlcss

Why does the content not appear again when switching between tabs?

Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappea ...

javascripthtmlcss

JavaScript: Populating an Array with Image URLs Using a Loop

My image gallery project has hit a roadblock and my JavaScript skills are not up to par. Maybe it's time to brush up on the basics with a good book from the library. Here's what I want to achieve: 1. Create an array of URL's for each imag ...

javascripthtmlarraysimagefor-loop

Determine if a draggable item is currently positioned over another element

In my body, there are several divs located: <div id="one"></div> <div id="two"></div> <div id="three"></div> All of these divs are draggable using jqueryUI: var $divs = $('#one, #two, #three'); $divs.draggab ...

javascriptjqueryhtml

The XML data is valid, however the responseXML property in the XMLHttpRequest response is null

Click here to access the API URL, which returns XML data. However, the responseXML property in the XMLHttpRequest response is coming back empty. How can I retrieve the XML data from the response? document.body.onload = loadXMLDoc(); function loadXMLDoc ...

javascripthtmlxmlxmlhttprequest

Concealing Website Elements with javascript based on class assignments

Despite my hesitation, I have to ask this question after unsuccessful searches in related articles. In my code, I have 7 nav links all with the same class. Due to the length of the HTML, I am looking for a way to hide contents until the link is clicked, an ...

javascriptcss

Utilizing Bootstrap 5 to showcase a variety of images that adapt to different screen sizes

Using Bootstrap 5, I am attempting to utilize an img tag to showcase a different image depending on the device - mobile, tablet, or desktop. However, I am facing challenges in correctly setting the breakpoints for the wrapper divs using the display utiliti ...

htmlcsstwitter-bootstrapbootstrap-5

Enhancing User Experience with Real-Time Control Updates using ASP.Net and Bootstrap

I am struggling to figure out how to update bootstrap controls with ASP.Net. Here is the code I am working with: @{ Layout = null; } <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width ...

javascriptc#asp.netasp.net-mvctwitter-bootstrap

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

Creating a Timeout Function for Mobile Browsers in JavaScript/PHP

Currently, I am developing a mobile-based web application that heavily relies on AJAX and Javascript. The process involves users logging in through a login page, sending the data via post to the main page where it undergoes a mySQL query for validation. If ...

phpjavascripthtml

Show a picture on top of another picture

Is there a way to overlay an image and text on top of another image, similar to what is done on this website ? ...

cssimagetext

What's the best way to display a component once a function has been executed?

My service controls the visibility of components using *ngIf! Currently, when I click a button, the service sets to true and the components appear instantly! I want the components to only show after a specific function has finished executing. This means I ...

javascriptjqueryhtmlangularangular-ng-if

Navigate through each element with a specific class name in a block of HTML code using

Currently, I am dealing with an HTML string that is being retrieved through AJAX. Let's assume it looks like this: var htmlString = '<div class="post"></div><div class="post"></div>'; I want to find a way to iterat ...

javascriptjqueryhtmlajax

Aligning a div element horizontally

I'm having trouble aligning the div element with the .slider class horizontally. The margin: 0 auto; property doesn't seem to be working. Additionally, I would like to know how to make the slider image responsive. /* CSS Document */ .header { ...

htmlcss

Retrieving innerHTML from a VueJS custom component

Attempting to create a basic bootstrap alert component, I am struggling to access the innerHTML of my custom component. Here is the code snippet: Vue.component('my-alert', { template: '#vue-alert', props: ['type', ' ...

javascripthtmlvue.js