bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frustrating!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script type="text/javascript" src="script/script.js"></script>
  <title>Bootstrap</title>
</head>

<body class="darkbg">
  <nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">
    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar-dropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link nvm-link current-link" href="index.html"> NVM </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="gallery.html"> GALLERY </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="shop.html"> SHOP </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="#"> MUSIC </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="#"> CONTACT </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid full-height">
    <div class="row">
      <div class="col-lg-6">
        <div class="home-article">
          <h2 class="home-header flexFont">WHO THE HELL ARE WE?</h2>
          <p class="text-indent main-text"> Hell is full, of all the torturing, screaming, killing, fire, smoke, and poker games a demon could ask for. Unforunately, Satan had no interest in giving us what we needed to have a successful business in the underworld, and most of the other
            demons laughed in our faces or ignored us. </p>
          <p class="text-indent main-text"> Nobody in hell cared about us, and why would they? It's fucking hell, but me and my cool ass friends knew we deserved more than that. So, we sought out to find the prophesied portal to the surface realm. And guess what bitches, WE FOUND IT!
            </p>
          <p class="text-indent main-text"> After we celebrated, we closed the portal to prevent any lames from rising above and stealing our awesome idea, We were gonna make this business happen in a world where people care about looking badass(almost everone in hell is pretty badass).</p>
          <p class="text-indent main-text"> After we arrived, you humans didn't really take kindly to a bunch of unholy beasts trying to sell you shit, understandable. So we did some research, removed our horns, and made ourselves some awesome masks. <br> NOW WE LOOK LIKE YOU! BOOM! </p>
          <p class="text-indent main-text"> You're welcome, it took a lot of soul for us to demote ourselves to your standard so you could buy our gold, so have some fucking empathy. Look at our art, buy our clothes and other cool ass merchandise, sign up for our newsletter too while
            you're at it. </p>
          <p class="text-indent main-text"> Don't worry. We don't want to kill you, without you we serve no purpose. We just want to spread our noise surface-wide(and then maybe eat your soul, if you're a poser). </p>
          <p class="text-indent main-text bottom-text"> Welcome to <a class="text-red" href="#"> NVM </a>, the home of the designer demons.</p>
        </div>
      </div>
      <div class="col-lg-6">
        <img class="demon-pic" src="" alt="IMAGE OF THE SEVEN OF US DRAWN AS OUR DEMONS">
      </div>
    </div>
  </div>


</body>

</html>

This is the CSS I added:

.navbar-toggle {
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
}

.navbar-toggle .icon-bar {
  background-color: red;
}

Answer №1

Don't forget to include the essential class navbar-light in your <nav section.

This specific class is crucial for displaying icons and colors correctly within the navbar.

All you have to do is update this:

<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">

to this:

<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center navbar-light">

By making this change, the hamburger icon will become visible.

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

The issue with Lodash isEqual arises from the constructor specified by Angular

Currently, I am utilizing Lodash _.isEqual for performing a deep comparison between a local JavaScript object and another JavaScript object fetched through angular $get. The initial code indicates that the objects are not the same: $get({...}, function ( ...

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

Step-by-step guide on completing and submitting a form through a Windows application

Many are questioning the age and repetition of this query, but here is where my issue begins. Are you noticing two input fields with the same name? HTML CODE <html> <head><title></title> </head> <body> <input type= ...

Creating dynamic bar chart visuals using Morris.js with JSON responses

Utilizing the morris.js library, I am extracting and plotting bar charts from data retrieved through a webservice. Issue: The format of my webservice URL is as follows: http://localhost:9999/hellowebservice/search?select=* I populate the select query ...

Challenges arise when employing angular scope functions in the context of the DOM (html)

UPDATE: Encountered an issue caused by attempting to iterate over a function's return value using ng-repeat \ ng-options, rather than converting the data into a regular object through a promise. Here is the code snippet: $scope.layout.getParti ...

How can I make a div blur as I scroll through the page

How can I make each item in my timeline focused one at a time as the user scrolls, instead of having all items in focus simultaneously? Any ideas or suggestions would be appreciated. Here is my fiddle and here is my code $(document).ready(function(){ ...

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

Align the emoji in the center of the absolute div horizontally

I'm currently working on a project involving placing emojis at different coordinates within a webpage. At times, the emoji is larger than its container. For instance, here is an example of HTML code that positions a house with a font size of 100px ins ...

Consistent Row Heights for Dynamic Width Elements

I've relied on Chris Coyier's Equal Height Blocks in Rows jQuery script for various projects, and it has consistently delivered great results. However, this time I am facing a new challenge as I work on a responsive website with a fluid width ma ...

Getting the content inside a div tag with selenium in python

https://i.sstatic.net/OrWZ2.png Is there a way to retrieve the content within the specified div tag? I attempted copying and pasting the xpath, but when attempting to print the contents of the div, it did not work. div = driver.find_element_by_xpath(&apo ...

What causes the malfunction of the save function in express?

Today marks my first venture into using Express. I attempted to create a straightforward route, but unfortunately, my save function is not cooperating. Despite scouring similar inquiries on stackoverflow, I have been unable to find a solution. Any assistan ...

What is the best way to retrieve the identity or specifics of the item that was right-clicked within the context menu

My AngularJS populated table includes a link button. When I right-click on this button, I've created a specific context menu using jQuery that pops up. The issue arises when I try to retrieve the ID of the item I clicked on in the context menu (such a ...

Can you provide guidance on how to showcase the chat date and time for each message in a webchat created with the bot framework SDKV4 using C#

I've successfully created a chatBot using bot framework SDKV4 in C# with the WebChannel as the channel. Everything is functioning properly, but I have a specific goal in mind: For each message that the user types or the Bot replies to, I want a time ...

Embed Text inside an HTML Canvas

As someone who is relatively new to working with html canvas, I am having a bit of trouble when it comes to containing text within the canvas area. Specifically, I am pulling text from a textarea and displaying it on the canvas, but it seems to stay as one ...

Accessing the statusText of a 403 response in Axios (React, Express, Node.js)

Within my component, there is a register function that makes an API call. The API checks if the email already exists and provides an appropriate status and statusText based on the result. Below is the API call handler in my Express app: router.post(' ...

Error: Loop Program Encountered Unexpected Token Syntax

Every time I attempt to run this code, a syntax error (unexpected token) appears. As someone who is still learning JavaScript, I am struggling to identify the root cause of this issue. var x = 1; var example = function(){ for(var y = 0; y < ...

Updating the background image without having to validate the cache

I have implemented a basic image slideshow on my website using a simple Javascript function. The function runs every 5 seconds to update the CSS "background-image" property of a div element. While it is functional, I've noticed that each time the func ...

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

Switching from PHP to JavaScript before returning to PHP to establish and manage sessions

Currently, I am in the process of resolving an issue I am facing. The problem arises when utilizing the following code for someone trying to sign into the admin panel: <script> function myFunction() { //alert('you can type now, end ...

The dilemma of selecting objects in Three.js

Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...