The collapse feature of Bootstrap 4 Navbar is unresponsive

Struggling with the Bootstrap 4 navbar collapse feature issue. In the mobile viewport, instead of collapsing, it displays items as a vertical list.

Here is the code snippet:

<html>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-sm navbar-light">
        <div class="container">
            <button class="navbar-toggler" type="button" aria-label="collapse" data-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggle-icon"></span>
            </button>
            <div class="collapse navbar-collapse text-center justify-content-center" id="navbarSupportedContent">
                <a class="nav-link" href="#"><i class="far fa-dot-circle fa-lg pt-1"></i></a>
                <a class="nav-link" href="#">Menu</a>
                <a class="nav-link" href="#">Menu</a>
                <a class="nav-link" href="#">Menu</a>
                <a class="nav-link" href="#">Menu</a>
                <a class="nav-link" href="#">Menu</a>
            </div>
        </div>
    </nav>

    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Customized Bootstrap 4 version used (compiled from scss). Standard version shows button, not vertical list, but still doesn't work upon clicking. No errors displayed in browser console.

For reference, compiled CSS: https://pastebin.com/jKYGC5A7

SCSS file can be found here: https://pastebin.com/bbQNCAvh

javascriptbootstrap-4navbar

Answer №1

The navigation menu is designed using ul li elements, you can see a working example below:

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">MENU <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">MENU</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">MENU</a>
      </li>

    </ul>
  </div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

You can view the Codepen link for this example by clicking here: https://codepen.io/anon/pen/LdZYbP and here is a screenshot of how it looks on mobile view:

https://i.sstatic.net/t75AX.jpg

Answer №2

Ensure to include _transitions.scss if you are working with scss.

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

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Hey all, I recently started my journey into web development and I'm working on a feature to display "Last Refreshed ago" on the webpage. I came across this website which inspired me. What I aim to achieve is to show text like "Last Refreshed 1 sec ago ...

javascripthtmlexpressnpm-package

Validating properties of a class using Typescript's Class-Validator

I tried using the class-validator decorator library for validation processes on my sample project. However, it doesn't seem to be working as expected. The sample project aims to create projects based on user inputs, and I'm attempting to validate ...

javascripttypescriptclass-validatortypescript-decorator

What should the AJAX file in TagManager jQuery look like?

I'm currently utilizing Tagsmanager with JQuery, which can be found at There is a feature that allows tags to be pushed via Ajax: jQuery(".tm-input").tagsManager({ AjaxPush: '/ajax/countries/push', AjaxPushAllTags: true, ...

phpjavascriptajaxjquerytwitter-bootstrap

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

I have an onchange function that triggers when the "pending" option is selected in a select dropdown menu. This function adds a predefined value to an input field. However, I also want this functionality to apply when the page loads. Currently, the "pendin ...

javascripthtml

Following the same occurrence using varying mouse clicks

I am currently exploring the most effective method for tracking file downloads (specifically, pdf files) on my website using Google Analytics (UA). I understand that by utilizing <a href="book.pdf" onClick="ga('send','event','P ...

javascripthtmlgoogle-analytics

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

javascripthtmlcssreactjs

'Error: Points is not a valid function' encountered in Node.js

While attempting to run the code below in Node.js, I encountered the following error. The code consists of three files: the dao file which connects to a MongoDB database, the server file, and the index1 file. var mongoose = require('mongoose'); ...

javascriptnode.jsmongodbexpressejs

Unable to modify attribute within $templateCache through an AngularJS Directive

Here is my Directive code: module.directive('iconSwitcher', function() { return { restrict : 'A', link : function(scope, elem, attrs) { var currentState = true; elem.on('click', function() { ...

javascriptjqueryangularjsangularjs-directiveangular-directive

The text for the Google chart is nowhere to be found

After creating a test project using the Google Chart example, I noticed that some text from the chart is missing after adding CSS. Here is the CSS code I used: html, body { font-size: 100%; height: 100%; width: 100%; } body { background: ...

javascripthtmlcssgoogle-visualization

Are there any reliable charting APIs available that can efficiently handle the lazy-loading of large data sets using Ajax while scrolling or zooming?

Hey there! I need help finding a JavaScript charting API that allows me to query the server using specific bounds on the horizontal and vertical axes in order to retrieve new data points. Just to give you an idea, the dataset I'm working with is incre ...

javascriptjqueryhtmlcss

What is the best way to display my 'React Loading Spinner' component at the center of my view?

Whenever I use the Loading as my parent component for the Layout component, it always shows up in the center of the page instead of within my view. How can I adjust its positioning? ...

javascriptreactjsreduxnext.jsreact-redux

Ways to generate arrays in Typescript

My dilemma lies in a generator method I've created that asynchronously adds items to an array, and then yields each item using yield* array at the end of the process. However, TypeScript compiler is throwing me off with an error message (TS2766) that ...

javascriptarraystypescriptasync-awaitgenerator

How can I use JavaScript to trigger a button click event inside an iframe element

Is there a way to retrieve the inner HTML contents of a clicked element in an iframe loaded content using JavaScript? This code uses jQuery: var elements = document.getElementsByTagName('iframe'); [].forEach.call(elements, function(elem ...

javascripthtmliframe

gulp.watch executes tasks without following a specific sequence

Objective Develop a gulp.watch task to execute other tasks in a specific sequence Why this is unique While many have referred me to How to run Gulp tasks sequentially one after the other, my query differs as it pertains to using gulp.watch instead of gu ...

javascriptnode.jsnpmgulpgulp-watch

The conditional rendering logic in the ng-if directive does not seem to be synchronizing

Currently, I am delving into AngularJS and working on a basic application to gain familiarity with it. Within my app, there are four tabs: List, Create, Update, and Delete. However, my goal is to only display the Update and Delete tabs when I press the b ...

javascripthtmlangularjs

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

Is there a way to display a pdf from another website without having to redirect to that site? I'm looking for a solution that involves using the URL directly. ...

javascripthtml

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...

javascriptjqueryhtmlcss

Having trouble with the alignment in navbar using Bootstrap 4 mr-auto?

After browsing through similar questions on this platform, I still couldn't find a solution that works for me, as I am a beginner in web development. I am trying to align the contact link in my navbar to the right, but the "mr-auto" class and other me ...

htmlbootstrap-4navbar

Discover the method to retrieve HTML content by sending an HTTP POST request in AngularJS, similar to loading content

My attempt to retrieve HTML content using Angular Js Post HTTP method was successful, but only for text contents like P tags. I am now trying to fetch HTML contents that include input types such as text boxes using Angular JS. Interestingly, when I utilize ...

javascriptjqueryhtmlangularjsajax