The hamburger icon menu is malfunctioning

Having some trouble with adding a hamburger button using Bootstrap classes. The button is not showing up at all.

In fact, none of the Glyphicons seem to be working for me. Did I miss something? Maybe forgot to import something?

I would really appreciate if someone could help me out with this issue.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>       
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">    
<link rel="stylesheet" type="text/css" href="projeto.css">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>    
<body>    
<section>    
<div id="pai" class="row">
    <div class="col-xl-12 col-xl-10">
        <nav>
            <nav class="navbar-default">
                <div class="container-fluid">                       
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>                       
                 </div>
            </nav>
       </nav>
    </div>
</div>
</section>

Answer №1

In the latest version of Bootstrap v4, the class icon-bar has been removed. To incorporate this change in your code, you can follow the new approach suggested for v4 or consider switching back to Bootstrap v3. Reference link

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-left" 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">
    </div>
  </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

Utilizing AJAX to dynamically populate a dropdown menu with data from a SQL

Having recently delved into the world of ajax, I have a basic understanding of how it works. I've implemented a registration form that dynamically updates the fields for "country, city, and area" using ajax to fetch data from a database. The PHP code ...

Steps for making a grid within a bootstrap 3 modal

I am new to HTML and CSS I'm working on creating a modal content similar to this: https://ibb.co/RvrhmRs Most of the work is done, but my modal currently looks like this: https://ibb.co/1zG0y2t I just need help arranging an icon next to the text. ...

Using jQuery AJAX to make an HTTP POST request while also including a ValidateAntiForgeryToken for

I am currently working on implementing a jQuery Ajax request to the controller method in ASP.NET MVC Core. Here is the jQuery code snippet: var mydata = JSON.stringify({ "ID": $('#ID').val(), "text": $.trim($( ...

Tips for showing/hiding textboxes based on select options:

I am currently working on a project that allows users to enter their personal information. I need help figuring out how to show or hide textboxes based on the selection made in a dropdown menu. The dropdown menu in question is for marital status. The opt ...

Achieving perfect alignment for a div that can adapt to different sizes and

Struggling with my CSS skills, I have spent countless hours trying to center a fixed/dynamic size div. The setup involves multiple images within a 100x100 size frame. Upon clicking on an image (thanks to jQuery), #fade is triggered to reveal a window showc ...

Internet Explorer Fails to Display CSS Background Images

Requesting assistance, The issue I am facing is that the background image is not displaying in Internet Explorer, although it appears perfectly fine in Safari. I have conducted thorough checks with W3C CSS validation and HTML validation, confirming that ...

How do I go about uploading the code as instructed on the platform's e-commerce details page?

.mk_01{ color: #000000; font-size: 30px; font-style: normal; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; text-align: center; } .mk_02{ color: #000000; fon ...

Menu: animated opening/closingIs this convenient, or

How can I add animation to opening and closing menu items in my project? I am not sure if it can be done in Angular or CSS. I have provided a reproduction of the project for reference => Stackblitz. HTML file <div class="wrapper"> & ...

When text is added to div elements, they are mysteriously pushed downward. This strange phenomenon occurs with inline-block elements

Why does the first element get pushed down when its child contains text? What causes inline-block to behave this way? Is there a way to align divs side-by-side while still allowing them to have children? For example, I want the grey box to contain a list ...

jQuery siblings toggling issue unresolved

I am new to jQuery and I'm trying to create a toggle effect between sibling divs. In other words, when I click to show the next div, the previous one should automatically close. Currently, the previous div doesn't close when the next one is opene ...

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" ...

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

Replacing defined WordPress CSS styles

I was considering posting this query on the Wordpress Stack Exchange platform, but it's more related to CSS than Wordpress. Unless I need to delve into the CSS files of a plugin to customize the styles, should I go there to ask this question? I am t ...

Deciphering jQuery serialized information in C#

I'm working with a ListBox on my webpage and trying to send the selected values through an AJAX call to a C# function. Here's what I currently have in place: $('#btnSubmit').click(function() { $.ajax({ type: "POST", ...

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

What measures can be taken to prevent content from collapsing?

My goal is to create a navigation system using Bootstrap 4's collapse feature to display content based on buttons at the top of the page. Here is my navigation bar setup: <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="# ...

When initiating payment through Razorpay by clicking "Pay Now" with a card or wallet, a new tab opens showing a blank page with a blocked message,

When attempting to integrate Django with Razorpay, I encountered an issue where clicking on the "Pay Now" button for payment options like card and wallet opened a new tab but resulted in a blank page. This prevented access to the success page. It's im ...

Troubleshooting Problems with Fancybox Scaling on Small Landscape-Oriented Mobile Devices

Issue Description: In my responsive web design, I am utilizing Fancybox v2.1.5. The problem arises when smaller mobile devices with a more rectangular shape than square are used. In portrait orientation, when invoking Fancybox, it expands to the width of ...

Using jQuery to append an <option> element to a <select> tag

Every time I try to add an option to a select, the option I want to add gets appended to the first option instead of the actual select element. $(".ct [value='']").each(function() { $(this).append($("<option></option>").attr("val ...

Create a dropdown menu in jQuery by using the prepend trigger

I'm attempting to utilize jQuery to prepend a trigger to a menu and then have that trigger toggle child elements. Unfortunately, the code below is not opening the sub menus when using jQuery prepend. Can anyone provide a suggestion for a fix? HTML & ...