Issue with navigation menu button functionality on mobile devices

Whenever I attempt to access my website on a small device, the bootstrap navbar is supposed to collapse. However, the button doesn't seem to be working. Any assistance would be greatly appreciated as this is the one issue I'm struggling with. I've exhausted all possible solutions.

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.0">
      <title>Impressions</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/cdn-cgi/l/email-protection"[email protected]"/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body data-spy="scroll" data-target=".navbar" data-offset="50">
    
    <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mx-auto mr-auto">
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block active" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block" href="#skills">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block" href="#about">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


    
    <!-- JavaScript Bundle with Popper -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cdn-cgi/l/email-protection"[email protected]"/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


  <script src="index.js"charset="UTF-8"></script>

  </body>
  </html>
javascripthtmljquerycsstwitter-bootstrap

Answer №1

The reason for this issue is most likely the use of the d-none class, which stands for hiding an element with display: none;. You can try changing it to display: flex;, as a simple solution. For further details, you can check out the flexbox documentation for more insights. Hope this helps.

Answer №2

Your menu items are not visible because of the presence of the d-none class.

<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.0">
        <title>Impressions</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120e120c115e59485d0d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    </head>
    <body data-spy="scroll" data-target=".navbar" data-offset="50">
      
      <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-auto mr-auto">
              <li class="nav-item">
                <a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a>
              </li>
              <li class="nav-item">
                <a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a>
              </li>
              <li class="nav-item">
                <a class="nav-link py-1 d-md-inline-block" href="#about">About</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
  
  
      
      <!-- JavaScript Bundle with Popper -->
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c776b7769743b3c2d3868">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  
  
    <script src="index.js"charset="UTF-8"></script>
  
    </body>
    </html>

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 removal of classList.remove() only eliminates the class itself, not its contents

My goal is to add one class and remove another class when the start quiz button is clicked. While the 'info_box' class is successfully added, the 'start_btn' class does not get removed; it just changes position (from flex to no flex). T ...

javascriptcssbootstrap-4

Dealing with errors in Mongoose within a Node.js application: A guide

I'm currently working on a node.js application using express, mongoDb, and mongoose. While the app is able to save users without any issues, I am facing an error in the code snippet below. The console always displays an error message even when the use ...

javascriptnode.jsmongodbexpress

The SCORM content is not establishing a connection with the Learning Management System

Despite initializing, the SCORM package is failing to communicate with the LMS and throwing an error: No SCORM implementation found. Below is my folder structure: -index.php -player.php -course/SCORM-course (directory) -wrap.js -SCORM_2004_APIWrapper.js ...

phpjavascriptjqueryscormscorm2004

Issue with anchor tag not functioning properly within toggle div

Can you please help me troubleshoot why the anchor tag is not functioning properly within my div elements? When I click on the first div, the second div is displayed but the anchor tag inside the first div does not seem to be working. <script> $(&ap ...

phpjqueryhtmlcss

After achieving success in displaying my navigation, I am currently facing difficulty in hiding it using the following code

I'm struggling with my code that handles navigation functionality. It shows the navigation when clicked, but I can't seem to make it hide again: $(".main-nav").hide(); $(".menu-btn-container .menu-toggle").click(function() { $( ...

jquery

Tips for preventing 404 errors in react-router

I am currently working on a project using React Router and created it using create-react-app. Everything runs smoothly on my local server with links like localhost:3000/login and localhost:3000/product. However, when I deployed the project to my domain, ...

javascriptreactjsreact-router

Convert a Material UI component into a string representation

I've been tasked with using a tool that creates a terminal interface within the browser. Our goal is to display HTML content, including Material components. The tricky part is that the tool requires input as strings. I discovered a package called jsx- ...

javascriptreactjsmaterial-ui

Converting Excel sheets to JSON using Vue.js

Struggling with reading excel files in vue.js as the memory usage spikes to 5GB after processing a small file. Need help converting the file to JSON format. Tried various options mentioned in the documentation but encountered different errors. Also checked ...

javascriptexcelvue.jssheetjs

Conceal your password using HTML techniques

My goal is to hide passwords from being visible unless a user hovers directly over them. I've tried using the code below, but the hover effect isn't working as expected - either the password disappears completely or remains visible at all times. ...

htmlcsshovervisibility

Make sure to modify the URL and store the response from Axios

My current code allows users to input a device name, then when I click on "View", an axios request is sent to a service and a response is received. Using this response, I display a design relating to the device name entered, and this functionality works sm ...

javascriptreactjsurlhttp-redirectaxios

Is there a way to change the text (price) when I select an option?

<div class="single-pro-details"> <!--Customize in the CSS--> <h6>Home / Beats</h6> <h4>Unique Lil Tecca Type Beat - New Love</h4> <h2 id="price">$ ...

javascripthtmlcss

Using Tailwind's media query functionality within ReactJS

I have a situation where I have a div containing an image within it. I am attempting to use media queries from the Tailwind CSS framework. <div className="flex"> <img src="/assets/logo.png" className="h-20 md:w-2" ...

cssreactjstailwind-css

Navigating through various JSON arrays using Angular

I am currently working with a large JSON file in Angular and trying to iterate through it. The structure of the JSON file is as follows: { "subject1":[ { "title":"titlehere", "info":"infohere." }], ...

javascriptjsonangularjs

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

This is how it should appear: item item item item additional text here I am trying to create a layout where the list is in List View for benefits like virtual scrolling, but the entire layout needs to be within a Scroll View. I want to be able to con ...

javascriptangularlistviewnativescriptscrollview

Challenges arise when working with arrays: Attention required - Offset 0 undefined

I have encountered a challenge with my PHP code. I am attempting to convert an HTML table into an array and then execute a mysqli query, but I am unsure about the process. In my code, I have a variable $aDataTableDetailHTML[][]. The first set of brackets ...

phphtmlmysqljson

JavaScript Naval Combat Game

I created a basic battleship game using javascript, but unfortunately it's not working properly. I stored the ship locations in an array and attempted to remove guessed locations by using the splice method. However, it keeps displaying "MISS!" when nu ...

javascriptarrays

In Laravel, modify the border color of a form field if the $error variable evaluates to true

When an error occurs, I want the border-color of a field to change to red. Take, for instance, this field: {!! Form::text('name1', old('name1', null), ['class' => 'form-control error', 'placeholder' =& ...

phphtmlcsslaravel

The CSS gradient background fails to fully cover the background when scrolling on the web browser

My webpage has a beautiful gradient background, but unfortunately, when the page is zoomed in, the gradient stops working and only the background color is displayed. Here is a snippet of the code: <html> <head> <style type="tex ...

htmlcssgradient

The bidirectional bindings within the component are malfunctioning

I just started learning Angular and I'm currently working on a small project. After following tutorials on two-way bindings, I attempted to implement it in my project. However, when I try to set values in the HTML for my component, it doesn't see ...

javascriptangulartypescript

Utilizing jQuery to remove a class with an Ajax request

My setup includes two cards, one for entering a postcode and another with radio buttons to select student status (initially hidden). An Ajax request validates the postcode input - turning the card green if valid (card--success) and revealing the student se ...

javascriptjqueryajax