Hamburger icon is failing to appear in the collapsed navbar for certain items

My React application is not displaying the items of the collapsed navbar when using the Bootstrap navbar for mobile responsiveness. Can anyone please suggest what might be wrong here?

<!-- Bootstrap 4.1.3 library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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>


<!-- Start of HTML code -->
<header id="header" className="fixed-top d-flex align-items-center header-transparent">
  <div className="container d-flex align-items-center navbar navbar-expand-lg navbar-light navbar-inverse ">

    <div className="logo mr-auto">
      <h1 className="text-light heading"><a href="/"><span>Prep</span></a></h1>
    </div>
    <button className="navbar-toggler  navbar-dark" type="button" data-toggle="collapse" data-target="#navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

    <nav className="nav-menu d-none d-lg-block">
      <div className="collapse navbar-collapse" id="navbarmenu">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item"><a href="#about">About</a></li>
          <li className="nav-item"><a href="#details">Features</a></li>
          <li className="nav-item"><a href="#team">Team</a></li>
          <li className="nav-item"><a href="#contact">Contact</a></li>
          <li className="nav-item"><a href="#faq">FAQs</a></li>
          <li className="nav-item">
            <Link to="/signup">Register</Link>
          </li>

        </ul>
      </div>
    </nav>

  </div>
</header>

htmljquerycssbootstrap-4

Answer №1

I have completed this task for you. Unfortunately, I am currently unable to install React, but I have utilized Bootstrap to achieve the desired result. Feel free to review the code below:

Here is the code snippet:

 <nav className='navbar navbar-dark navbar-expand-lg bg-dark'>
        <a href="#" class="text-light navbar-brand">Prep</a>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"  aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarmenu">
        <ul className="navbar-nav mr-auto">
            <li className="nav-item"><a className='nav-link' href="#about">About</a></li>
            <li className="nav-item"><a className='nav-link' href="#details">Features</a></li>
            <li className="nav-item"><a className='nav-link' href="#team">Team</a></li>
            <li className="nav-item"><a className='nav-link' href="#contact">Contact</a></li>
            <li className="nav-item"><a className='nav-link' href="#faq">FAQs</a></li>
            <li className="nav-item"><Link to="/signup">Register</Link></li>

        </ul>
        </div>
    </nav>

This solution offers a convenient fix for the issue and is quite straightforward. Since you are using JSX, I hope this solution meets your expectations and brings you developer satisfaction.

Answer №2

Always remember to include the jQuery link when using CDN links, and don't forget to import Bootstrap with import 'bootstrap'; if installing it with npm install bootstrap.

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

Styling with CSS and using templates

Just had a quick question about CSS and a template I'm working with. Currently, I have these two fields in my CSS: .content { padding:10px; width: 100% text-align:justify; font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif; } ...

ruby-on-railscss

Setting the default in jQuery and Rails when the document is ready

Currently, I have a set of anchor tags that serve as a filter. I am utilizing jQuery to find the relevant data tag so that when a name is clicked, it will display all the work done by a developer from a list of completed items. To add a touch of elegance, ...

jqueryruby-on-railsdefaultpageload

How can I retrieve the value of a JavaScript variable using Ajax?

Hello everyone! I've been a long-time user of various programming forums, but this is my first time posting. Lately, I created a really simple browser-based game, and when I say simple, I mean it's incredibly basic. The whole game logic resides ...

javascriptphpjqueryajax

What causes the consistent filling of responses in jQuery ajax?

After observing that the response of an ajax call using jQuery is never empty, I have come across the following code snippet: $.ajax({ type: "get", data: { data }, url: "phpFile", datatype: 'text' }).done(functio ...

javascriptphpjquerymysqlajax

Sharing $scope Data Between Controller and Directive in AngularJS

Recently, I created a straightforward directive that displays an object: var app = angular.module("myApp", []); app.controller('myCtrl', function($scope) { $scope.users=[ {name:'davidi',age:'23'}, {name:'karen ...

javascripthtmlangularjsangularjs-directive

Executing an Ajax SPARQL request in Firefox

I've been attempting to run an asynchronous Ajax sparql query on dbpedia using Firefox, but I encountered a strange issue that I can't seem to figure out. Surprisingly, the query works perfectly fine in Chrome, Edge, and Internet Explorer, but wh ...

javascriptjqueryajaxfirefoxdbpedia

What is the process for adding a custom header when making an ajax call in a datatable?

Currently, I am utilizing datatables and need to include a custom header for specific server-side requirements. Can anyone provide guidance on how to send a custom header when navigating to the next or previous pages using jQuery datatables? Additional ...

javascriptjqueryajaxdatatabledatatables

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

javascripthtmlcssvue.js

Unable to generate a select element using the JSON data retrieved from an Ajax request

After making an AJAX call to fetch some JSON objects, I successfully retrieve them. However, I encountered an issue while trying to generate a select element from the returned JSON - it doesn't seem to create one. This is what my JavaScript looks lik ...

javascriptjqueryajaxjson

Tips for leveraging a button to trigger server-side actions

Being a novice in web development, I'm currently working on a straightforward website that enables users to download files from the server side. These files are not pre-created; instead, there will be a button on the HTML page. When a user clicks this ...

javascriptjqueryhtml

"Jquery's .append function may sometimes display as undefined when

$("#clckjson").click(function() { $(document).ready(function() { $.getJSON("fuelj.json", function(data) { $(data).each(function(i, item) { console.log(item.stationID); var $table = $('<table>'); $table.a ...

javascriptjqueryjsonhtml-table

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...

javascripthtmlcss

Dealing with AngularJS memory leaks caused by jQuery

How can I showcase a custom HTML on an AngularJS page using the given service? app.service('automaticFunctions', function ($timeout) { this.init = function initAutomaticFunctions(scope, $elem, attrs) { switch (scope.content.type) { ...

javascriptjqueryangularjsmemory-leaks

Interacting with a .aspx web method using jquery.ajax

Previously, I had successfully implemented the code below in a proof of concept without using variables and hardcoding all the values. However, when I introduced variables to prepare for utilizing this channel, the functionality stopped working. There migh ...

jqueryasp.netajaxwebmethod

Set the styling of a div element in the Angular template when the application is first initialized

I have a question about this specific div element: <div class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio"> <img fill priority [ngSrc]="media.value.src || ftaLogo" ...

htmlcssangulartypescriptdom

The attribute in the JSON response from jQuery is incorrect and does not comply

I need to retrieve data from a different server and I am implementing an authentication method using jQuery. The expected data format from the server should be in JSON, but I'm encountering an error stating "invalid XML attribute value" in Firebug. M ...

jqueryjson

personalizing material-ui component styles – set select component color to be pure white

I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example: Component return <div> <FormControl variant="outli ...

javascriptcssreactjscomponentsmaterial-ui

Json encoding of Php array is not functioning as expected

My ajax connection to the json.php file is not working. Do you have any idea what could be causing this issue? Is it possible that my $output variable is not convertible to JSON or could it be a problem with my ajax setup? Any help or insights would be gre ...

phpjqueryjsonajaxxml

Struggling to make fadeIn() function properly in conjunction with addClass

I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...

javascriptjqueryhtmlcss

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

Is there a way to compare and copy different information from CSS files into another file? For instance, if I have two CSS files named a.css and b.css, is there a method to automatically select and copy only the differences between the two files? Thank y ...

htmlcssfileweb