The mobile navigation button on my website is unresponsive

Having trouble with my navigation button not working on mobile. Can someone please help me troubleshoot this? Thank you in advance.

 <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <div class="container">
          <a href="index.html" class="navbar-brand">Brajee</a>
          <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="navNavbar">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a href="index.html" class="nav-link">Home</a>
              </li>
              <li class="nav-item">
                <a href="about.html" class="nav-link">About Us</a>
              </li>
              <li class="nav-item">
                <a href="services.html" class="nav-link">Services</a>
              </li>
              <li class="nav-item">
                <a href="blog.html" class="nav-link">Blog</a>
              </li>
              <li class="nav-item">
                <a href="contact.html" class="nav-link">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
htmlcssbootstrap-4

Answer №1

Your hamburger button may not be functioning because the necessary JavaScript files and/or jQuery are not being loaded. I have provided a snippet below with those files included, which should resolve the issue. Feel free to test it by clicking "run code snippet" below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container">
        <a href="index.html" class="navbar-brand">Brajee</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a href="index.html" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="about.html" class="nav-link">About Us</a>
                </li>
                <li class="nav-item">
                    <a href="services.html" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="blog.html" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="contact.html" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

javascriptcsstwitter-bootstrapbootstrap-4choices.js

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

Arrange two images next to each other using Bootstrap grid system

Struggling to replicate the design of this website: Fister. But unfortunately, my images are not aligning properly. <html> <head> <meta charset="utf-8"> <!-- CSS only --> <link href="https://cdn.jsdeli ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to conceal the outline in a popup window?

I have successfully implemented a popup/modal window using JavaScript, but now I need to find a way to hide the outline map container. The initialization code for the map is as follows: self.mapDialogOptions = { autoOpen: false, m ...

javascriptjquerycssknockout.js

Using PHP to swap out HTML elements

I need a solution to display text with HTML tags as plain text, without the browser interpreting them. I want the output to be similar to how HTML code viewers render it. For example: replacing <div> with <span><</span><span>d&l ...

phphtmltags

How to align pagination in the center using Bootstrap

This code is for pagination features: <div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2< ...

htmltwitter-bootstrapcss

Step-by-step guide to making a button appear on the second page

<html> <head> <title>Embark on the ultimate gaming adventure</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </ ...

javascripthtmlbutton

The Angular Table row mysteriously vanishes once it has been edited

Utilizing ng-repeat within a table to dynamically generate content brings about the option to interact with and manage the table contents such as edit and delete. A challenge arises when editing and saving a row causes it to disappear. Attempts were made ...

javascriptjqueryhtmlcssangularjs

Building a sleek grid similar to Pinterest in Bootstrap v4.0 without relying on jQuery (using a black color scheme with equal width and varying height)

Is it feasible to craft a grid similar to Pinterest using Bootstrap 4? I am aware of the jQuery plugins that can be used, but is there a way to achieve this purely with CSS? Note: This is not a duplicate question. Please try to comprehend my query first ...

htmlcsstwitter-bootstrapgridbootstrap-4

Optimizing CSS for Landscape Letter Print Alignment

When attempting to print in letter size and landscape orientation, the two divs fail to align properly. However, when using "@size a4 landscape" for printing, the alignment issue is resolved. What could be missing from my print CSS that would allow them to ...

css

Secret button that remains unresponsive upon initial click after materializing

I am facing a problem with my two buttons in the HTML code. One button is supposed to plot data, while the other is meant to download data. The issue arises when the plot button has data and the Excel download button should become visible. Although this fu ...

javascriptjqueryhtmlbuttonhidden

What are some effective strategies for incorporating multiple Themes into an AngularJS project?

Currently, I am in the process of working on a project that involves utilizing AngularJS, UI Bootstrap, and Sass. The next step is to incorporate different themes that can be selected by the user. While I have successfully implemented the ability to apply ...

javascriptcssangularjstwitter-bootstrapsass

interaction & portal

I am currently managing a website that includes an iframe. Both the main site and the embedded site within the iframe are verifying the $_SESSION["login"]. Therefore, if the session expires, the user will be automatically logged out. The issue I'm fa ...

phpjavascripthtml

CSS image cropping is a technique used to adjust the size

I have successfully created a grid of images with two columns, but I'm facing an issue with a portrait image disrupting the layout. I am looking for a way to adjust or "crop" the image so it matches the height of the landscape ones. I attempted to use ...

htmlcssimagecrop

Arrangement of a pair of elements within a single sequence

Can someone help me align the text and icons (login, shop) to be at the same level as the 'Logo,' but on the right side? I attempted to adjust the '.shop-icon' with {margin: -30px auto;}, but it ended up messing up the entire page layou ...

htmlcssweb

Employing the power of JavaScript to enable the seamless toggle of an overlay

I have a div named "navbar_menu". On clicking this div, I want the visibility of the div named "nav_overlay" to fade in. Upon another click, I want it to fade back and become invisible again. Currently, I have set the div 'nav_overlay" to have ' ...

javascriptjqueryhtmlcss

The Bootstrap navigation row smoothly adjusts its size, yet only partially highlights active or highlighted links

When viewing on a smaller screen, one of the links in this navigation (nav-pills, nav-justified) spans two lines, causing the other links to appear larger as well. While this may seem beneficial, active or highlighted links only partially fill the box, res ...

csstwitter-bootstrap-3

What is the best way to use JavaScript to create an addEventListener that toggles a hamburger menu back and forth

Hi there! I'm currently in the final stages of polishing up my website before launching it online. However, I'm stuck on how to add an eventListener that will close the navbar hamburger menu without requiring manual scrolling back up to the top o ...

javascripthtmlcssaddeventlistener

using jQuery to show a block element

I'm attempting to determine whether a div with the style display as block then perform an action. Here is an example: This is just an idea I'm trying to implement using jQuery. if ($("#toshow").css("display") == "block"){ }else{ } ...

jqueryhtml