The Bootstrap 4 navbar-toggler-icon is missing from the screen

Check out this code snippet: https://jsfiddle.net/8tpm4z00/ 

<div class="container">

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

  <a href="#" class="navbar-brand">KP</a>

  <div class="collapse navbar-collapse" id="myNavigation">
      <div class="navbar-nav">
        <a class="p-3 nav-item nav-link active " href="#">Home</a>
        <a class="p-3 nav-item nav-link " href="#">About</a>
        <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
      </div><!-- <div class="navbar-nav"> -->
  </div><!-- <div class="collapse navbar-collapse"> -->

</div><!-- <div class="container"> -->

The issue I'm facing is that the .navbar-toggler-icon doesn't display on the button when the menu collapses for mobile view.

I've tried adjusting the order of jQuery and Bootstrap links, but it didn't solve the problem. The external libraries are linked in the correct order directly in my HTML, just like in the jsfiddle link provided.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Latest News:

navbar-inverse has been discontinued in the latest B4 version; you can now utilize navbar-dark as an alternative.

Swap out .navbar-default with navbar-inverse bg-inverse

<section role="navigation">
  <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->

    <div class="container">

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

      <a href="#" class="navbar-brand">KP</a>

      <div class="collapse navbar-collapse" id="myNavigation">
          <div class="navbar-nav">
            <a class="p-3 nav-item nav-link active " href="#">Home</a>
            <a class="p-3 nav-item nav-link " href="#">About</a>
            <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
          </div><!-- <div class="navbar-nav"> -->
      </div><!-- <div class="collapse navbar-collapse"> -->

    </div><!-- <div class="container"> -->

  </nav>
</section>

Check out the updated fiddle here

Answer №2

Using Bootstrap 4 beta:

The navbar-dark class can only be added to the nav element.

Example:

<nav class = "navbar navbar-expand-lg navbar-dark fixed-top navbar-default" role = "navigation">
     <a class="navbar-brand" href="#">
         <img class = "img-responsive logo" src = "~/Content/Images/ogo__160x36.png" alt = "" />
     </a>
     <button type = "button" class = "navbar-toggler" data-toggle = "collapse" data-target = "#menuPrincipal" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">
         <span class = "navbar-toggler-icon"> </ span>
     </button>
     <div class="collapse navbar-collapse" ...>...</div>
</nav>

Answer №3

To add a background image to .navbar-toggler-icon when not using navbar-light or dark, follow these steps:

.navbar-toggler-icon {
background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M47h22M4 15h22M423h22'/%3e%3c/svg%3e);
}

Alternatively, you can use the fa-bars icon from Font Awesome.

Answer №4

Opt for navbar-dark over navbar-inverse, and also use bg-dark instead of bg-inverse.

  <nav class="navbar navbar-dark navbar-expand-md bg-dark ">

Answer №5

I have made a change to the code by replacing class="navbar-toggler" with class="btn".

The modified code snippet is as follows:

<!--Toggler-->
<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

This adjustment has proven effective in improving functionality.

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

Techniques for navigating unidentified JSON structures using JavaScript

Currently, I am faced with the challenge of parsing the given data: { 'unknown-value': { name: 'AB', id: 'BLUE' }, 'unknown-value': { name: 'AC', id: 'PURPLE' } } My objec ...

javascriptjsonparsing

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

javascriptcssvue.jsatomic

Display the image prior to sending the ajax request, then conceal it once the request is

My post is loaded using infinite scrolling, and when I send an AJAX request, a loading image is displayed. However, the image is supposed to hide once the process is complete, but it doesn't always work at the end of the pages we load. Here is a s ...

jqueryajax

Despite creating a new array, Vuetify 2 continues to display 10 in the pagination options

I am facing an issue in Vuetify 2 where I have set the pagination options of a data table to be [50,60,70], but on the page, it displays [10,50,60,70]. It seems to be combining the default 10 into the list. https://codepen.io/anon/pen/NQRRzY?&editable ...

javascriptvue.jsvuetify.js

Sorting in MongoDB aggregation operations

I have a database containing user activities, and I want to calculate the number of active users and activities they performed each month. The results should be sorted by year first and then by month within each year. Here is my query: query = { ...

javascriptpythonmongodbsorting

wunderground compass tool indicating the direction of the wind

I am using weather jQuery from the Wunderground API, and my jQuery is working well. However, the problem lies in the Wunderground API wind direction degrees. I want to display the wind degrees on a compass, and I found this answer on StackOverflow: CSS: ...

javascriptjqueryhtmlcss

Set the background of the div element behind the image

I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code: <div class="row text-center about__gallery"> <div class="col-xs-12 col-sm-4"> <div cl ...

htmlcsssass

Exploring the world of event listening in JavaScript

There has been much discussion about the single-threaded and asynchronous nature of JavaScript, with mentions of the event loop and callback queue. One thing I find puzzling is how a single-threaded language can manage to keep track of events and add even ...

javascriptasynchronousevent-loop

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

javascriptjqueryhtmlcss

How can I annotate the overall count of occurrences of a keyword across multiple models following filtration in Django?

I have a situation where my 'Keyword' model stores keywords for 4 other models, each with a 'key_list' field that is a ManyToManyField pointing back to the 'Keyword' model. The models have multiple keywords, and I am successfu ...

pythoncssdjangopython-3.x

Holder.js is compatible with Node.js when integrated with the Express web framework

Currently, I am utilizing node.js alongside the express web framework and the jade template parser. While attempting to implement some bootstrap examples, I encountered difficulties with holder.js. To address this issue, I placed the holder.js script int ...

node.jstwitter-bootstrapexpresspugholder.js

Encountering a Typescript error while attempting to utilize mongoose functions

An example of a User interface is shown below: import {Document} from "mongoose"; export interface IUser extends Document{ email: string; password: string; strategy: string; userId: string; isValidPassword(password: string): ...

javascriptnode.jstypescriptexpressmongoose

Which specific combination of CSS and HTML attributes can cause an image to not display correctly in the Safari browser?

The image labeled "GIANT MANGO" is supposed to be displayed in the center below this text. While it appears correctly in Firefox, Chrome, and IE, it unfortunately does not show up on Safari browser. To view the image, visit Any suggestions on how to fix ...

htmlcssimage

What is the best way to create a fully clickable span element?

I want to create a fully clickable span element. <span><a href="#" title="Remove" id="159" class="remove">159</a><input type="hidden" name="t[1][p][]" value="159"></span> The span contains a background image floated to the r ...

jqueryanchor

Customize the background color of highlighted text using HTML and jQuery

Recently, I modified an existing code to divide plain text into four classes by selecting a portion of the text and coloring it. Afterwards, I extracted the text of each class and stored it in my database. While this code works well, I am looking for a way ...

javascriptjqueryhtmlhighlighting

Most effective approach to setting up a timer using Javascript and PHP

I'm currently working on a quiz application using PHP and Javascript. The quiz begins once the user clicks a submit button, but I want it to end after a specific duration that I define. I'm hesitant to rely solely on the client-side clock as it c ...

phpjavascripthtmltimetimer

I am experiencing an issue where the borders of a dropdown menu do not properly wrap around

I'm currently in the process of creating a dropdown menu that will display a list of articles along with the respective authors' images next to them. Initially, I intended to utilize Bootstrap 4's "card" system for this task. However, I enco ...

csshtmltwitter-bootstrapbootstrap-4

Encountering an Unresolved Runtime Issue: TypeError arises when attempting to access properties of undefined (specifically 'call') while utilizing the Image component in next.js

I'm currently experimenting with the Image component offered by next.js. This Is My Basic Header Component import Image from 'next/image' import React from 'react' import myImage from '../assets/IMG-20221115-WA0001.jpg' ...

javascriptreactjsnext.jsnextjs-image

Retrieve the value from the socket client and store it in a

I have a query regarding updating socket values from another JS file. How can I achieve this? App.js io.on('connection', function (socket) { socket.currentRoomId = 0; socket.currentRoomName = "Loading..."; socket.currentRoomOwner = ...

javascriptmysqlnode.jssocketssocket.io

Struggling to display HTML content in my AngularJS application

Excuse my lack of experience with AngularJS. I'm encountering difficulties when trying to display HTML content in my Angular application! Here is the partial I am using: <div ng-app="myGreatApp" ng-repeat="article in articles" > <div n ...

javascriptangularjs