Menu toggle vanishes suddenly

Whenever I click the toggle button, I notice that the menu (which I have set to appear on toggle) only shows for a brief moment before disappearing. As a beginner in bootstrap, I am sure I might have made some obvious mistakes. Any assistance would be greatly appreciated.

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">    
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title></title>
</head>
<body>
    <div class="container ">
        <nav class="navbar navbar-expand-sm  navbar-dark bg-dark">      
            <a href="#" class="navbar-brand"><img src="logo.png">The building co.</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="myMenu">
                <ul class="navbar-nav">
                    <li class="nav-item" > <a href="#" class="navbar-link">Home </a> </li>
                    <li class="nav-item" > <a href="#" class="navbar-link">contact us </a> </li>
                    <li class="nav-item" > <a href="#" class="navbar-link">policy </a> </li>
                    <li class="nav-item" > <a href="#" class="navbar-link">terms </a> </li>
                    <li class="nav-item" > <a href="#" class="navbar-link">About us </a> </li>          
                </ul>
            </div>
        </nav>  
    </div>
</body>
</html>

Answer №1

Begin by utilizing the precise starter template outlined in the official Bootstrap documentation.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 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">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Next, incorporate the bootstrap navbar component with links as per the bootstrap documentation example.

Answer №2

Make sure the path to bootstrap.min.css is correct in your code. Once you fix that, everything should work smoothly:

<html>

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width,initial-scale=1.0>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <title></title>
</head>

<body>
  <div class="container ">
    <nav class="navbar navbar-expand-sm  navbar-dark bg-dark">
      <a href="#" class="navbar-brand"><img src="logo.png">The building co.</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="myMenu">
        <ul class="navbar-nav">
          <li class="nav-item"> <a href="#" class="navbar-link">Home </a> </li>
          <li class="nav-item"> &A<a href="#" class="navbar-link">contact us </a> </li>
          <li class="nav-item"> <a href="#t" class="navbar-link">policy </a> </li>
          <li class="nav-item"> <a href="#" class="navbar-link">terms </a> </li>
          <li class="nav-item"> <a href="#" class="navbar-link">About us </a> </li>
        </ul>
      </div>
    </nav>
  </div>
</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

Is there a way to modify just the homepage url of the logo on a WordPress website using the OceanWP theme?

My website, abc.com, is set up with Angular for the homepage and WordPress for the blogs. The WordPress site is located in a subfolder within abc.com. You can see the file structure in the image below. I am now looking to change only the homepage link on ...

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...

What is the best way to avoid duplicating this JQM function multiple times and instead reuse it efficiently?

After coming across this interactive demo, I successfully implemented it on my website using JQM. However, in order to activate the panel swipe feature, I had to include the following function: $( document ).on( "pagecreate", "#demo-page", function() { ...

The button event is currently only targeting the initial class. (Jquery)

I am having an issue where only the first instance of the saveBtn class is being saved into local storage when clicked. Can anyone provide some assistance with this? Here is the HTML: <div class="hour-container" id="8am"> & ...

Enhancing text with custom gradient using CSS styling

I am facing an issue where uploading an image with text is not helpful for Google search visibility. I am looking to add a specific gradient style to my text. Could anyone assist me in achieving this particular text look that I have in mind? I came acros ...

What is preventing me from updating the value of a variable in this manner?

Trying to understand the reason behind an issue with overwriting a value passed to an angularJS directive using an isolate scope (@). When attempting to change the value of vm.index with the following: vm.index = parseInt(vm.index, 10) It does not seem t ...

Troubleshooting the deployment of a complete full-stack application on Heroku

I have been facing the challenge of deploying my full-stack chatkit messenger app from localhost to production on Heroku. I am encountering a 404 "Not Found" error and unsure about the necessary changes that need to be made in my code for it to run smoothl ...

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

I have some content from another source that I must transform into proper HTML. The content contains a string such as: "Hello, how are you?" Additionally, there is a separate section detailing styling instructions. For example: 'bold:star ...

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

What steps can I take to stop a browser from triggering a ContextMenu event when a user performs a prolonged touch

While touch events are supported by browsers and may trigger mouse events, in certain industrial settings, it is preferred to handle all touch events as click events. Is there a way to globally disable context menu events generated by the browser? Alternat ...

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

A step-by-step guide on incorporating universal CSRF tokens using JQuery AJAX

As part of my development work, I am in the process of creating jquery code that communicates with the server through ajax to input data into a database based on specific request parameters. My main concern at this point is the vulnerability to CSRF attac ...

Vanilla JavaScript: Enabling Video Autoplay within a Modal

Can anyone provide a solution in vanilla JavaScript to make a video autoplay within a popup modal? Is this even achievable? I have already included the autoplay element in the iframe (I believe it is standard in the embedded link from YouTube), but I stil ...

Setting up an abstract state as the backdrop in AngularJS: A step-by-step guide

I am trying to maintain an animated background while switching between different states in my UI-router setup. The goal is for the background to remain constant while only the content of the states changes. Here is how I have set up my UI-router and attem ...

Arrange the contents within a div with Bootstrap 4 for proper alignment

Just stepping into the world of front end development and my question might come off as quite basic. Currently, I am delving into ReactJS. https://i.sstatic.net/o9tDo.png My current challenge is related to the following code snippet: <div className=" ...

What is the best way to transfer a JSON object from Java to JavaScript?

I've been struggling to pass data from my Spring controller to JavaScript, but I haven't had any success so far. Would using ajax be the best approach for this task? Can you provide me with some hints on how to achieve this effectively? In my co ...

The perplexing results received when using the npm outdated command

Could someone provide an explanation for the meaning behind this output? $ npm --version 3.10.8 $ npm -g outdated npm Package Current Wanted Latest Location npm 3.10.8 4.0.2 3.10.9 As stated in the documentation, the "Wanted" column should d ...

Creating Custom Filters in Angular using Functions

Attempting to filter ng-repeat using a function instead of an actual filter has presented some challenges. The code snippet below demonstrates the attempt: <tr ng-repeat="(key, value) in dataObj| filter:dataFilter"> The intention is to define dataF ...

What is the best method for converting IDs into objects within ng-options in Angular?

Is there a way to dynamically use an array of IDs as the source of my ng-option directive inside of select? Instead of creating an array of objects with corresponding IDs, I am wondering if there is a method to set a function as the source of ng-option. ...

having trouble retrieving information from the input field

I'm having trouble retrieving the user's input from the input field, can someone assist me with this issue? I can't seem to identify what the problem is here. var ftemp = document.getElementById("Farenheit").value; <td> <i ...