Issues with Bootstrap's hamburger menu not functioning properly when clicked

Can't seem to get my hamburger button working. I've followed the bootstrap documentation and ensured that Bootstrap and jQuery are in the correct order, but still no luck. Any suggestions on what could be causing this issue? Are my links misplaced or not functioning properly? Any assistance would be greatly appreciated. Thank you!

<!DOCTYPE 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">
<meta name="description" content="Gloriane Tran's personal website with information about her academic work and projects.">
<meta name="author" content="Gloriane Tran">

<!--JQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<!--Bootstrap Themes-->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javacsript" src="/bootstrap/js/bootstrap.min.js"></script>

<!--Icons-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!--Stylesheets-->
<link href="/stylesheets/footer.css" rel="stylesheet">
<link href="/stylesheets/font.css" rel="stylesheet">
<link href="/stylesheets/nav.css" rel="stylesheet">

<!--Fonts-->
<link href="https://fonts.googleapis.com/css?family=Oxygen|Rufina" rel="stylesheet">

<!--Page Title -->
<title>Gloriane Tran | Home</title>
<link href="/stylesheets/index.css" rel="stylesheet">
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
    <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand rufina" href="/">Gloriane Tran</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right rufina">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/projects">Projects</a></a></li>
        </ul>
    </div>
</div>
</nav>

</body>

</html>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Ensure that your components are fully updated:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Tested and verified to be functional!

<!DOCTYPE html>
<html lang="en-US">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand rufina" href="/">Gloriane Tran</a>
      </div>

      <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right rufina">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/projects">Projects</a></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</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

Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout: [curtain repeat][left curtain][stage][right curtain][curtain repeat] The left curtain, stage, and right curtain should maintain a ...

htmlcss

Managing dynamic input texts in React JS without using name properties with a single onChange function

Dealing with multiple onChange events without a predefined name property has been challenging. Currently, one text input controls all inputs. I have come across examples with static inputs or single input functionality, but nothing specifically addressin ...

javascriptreactjs

Is there a way to verify the selection of all mandatory fields prior to concealing a div?

var count = 2; $('.next').click(function() { var requiredField = true; $(this).siblings('table').find('tbody tr:nth-child(' + count + ') td').each(function() { var element = $(this).find('center').f ...

javascriptjqueryhtml

Issues with the positioning of JQueryUI Dialog components are causing unexpected behavior

Utilizing JQueryUI Dialog, I have implemented the following function: <script> $(document).ready(function() { $('#dialog').dialog({ autoOpen:false, width:100, height:200, ...

jqueryjquery-ui

The art of sweet redirection with Sweetalert2

I am working on a PHP page where users can input a number in a text field. If the entered number exceeds their available credit, I need to display an error message. Upon clicking the submit button to send the form, the user is directed to makeTransfer.php ...

javascriptphpsweetalertsweetalert2

Explaining the implementation of JQuery's onload event and its impact on reducing dependencies

Contained within a table is some data https://i.stack.imgur.com/gQyJQ.png Upon clicking the edit button, I am able to modify the information in that specific row. The Menu Category and Menu are populated through Dependent dropdowns. https://i.stack.imgur ...

javascriptphpjqueryajaxlaravel

Using jQuery Ajax to Retrieve Data from a Textbox Array

I am new here, Usually, I use pure PHP to insert data into MySQL, but now I have to use jQuery Ajax for some reason. Here is the HTML code: <input name="produk[]" value="cookies" class='product' type="text" /><input name="qty[]" clas ...

jqueryajax

Differences in the way websites scroll on Chrome compared to Safari and Firefox

Currently, I am in the process of developing a rendering system for my application that extracts objects from a collection and processes them through JavaScript templates to generate additional children as the user scrolls through the page. The system is d ...

htmlcssgoogle-chromescrollsafari

Convert an array to UTF-8 encoding and extract the values into a text input field

Having encountered a minor issue, I've successfully moved data from one file to another using Ajax with the help of echo in my query. However, I'm now attempting to utilize json_encode(); and facing some difficulties. Could someone please point o ...

phpjquerymysqlajaxarrays

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

javascriptwebkitcss

Using jQuery, you can easily update the value of the nth-child(n) for a cloned element

Looking to duplicate an HTML element and assign new values to its child elements? Here's my current HTML structure: <div id="avator" class="avator" style="display:none"> <label><a href="/cdn-cgi/l/email-protection" class="__cf_email ...

htmljquerycss

Troubleshooting: ng-disabled feature is not properly functioning with Bootstrap buttons

I am currently using a combination of bootstrap.js and angular js in my project. The code snippet I have is as follows: //snippet from the controller $scope.isWaiting = true; $scope.promise = $http.get("voluumHandler.php?q=campaigns&filter=traffic-sou ...

javascriptajaxangularjstwitter-bootstrap

Utilize the cached version of jQuery if it has been recently updated, otherwise proceed with downloading the newest

Is it possible to optimize loading time for certain users by selecting a specific version of jQuery? Identify a suitable version x of jQuery, such as x = 1.4.1, and determine if the user has a more recent version y of jQuery cached. If so: if (y > x = ...

jquery

Dynamic and static webpage

Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...

htmlcssfixedfluid

Is it possible to share data from one controller in a JS file to another JS file? (using AngularJS)

I need to create a table in JavaScript. In one of my JS files, I have a controller with JSON data containing properties like width, height, color, etc. In another JS file, I am building the actual table structure. Here is an example of my AngularJS file: ...

javascriptjqueryjsonangularjs

Can you list out the directives that are responsible for generating child scopes in AngularJS?

I recently discovered that when using ng-if, it actually creates a child scope, leading to some confusion on my end. I'm curious about the reasons or benefits behind ng-if's scope creation. Can you also tell me which other built-in directives cre ...

javascriptangularjsangularjs-directive

The error in React syntax doesn't appear to be visible in CodePen

Currently, I am diving into the React Tutorial for creating a tic-tac-toe game. If you'd like to take a look at my code on Codepen, feel free to click here. Upon reviewing my code, I noticed a bug at line 21 where there is a missing comma after ' ...

javascriptreactjscodepen

"Let's delve into the world of dynamic variables and Javascript once

As a newcomer to JS, I've scoured countless posts for solutions, but nothing seems to work for me. The issue arises when trying to abstract the code to handle all variables rather than just explicitly expressed values. I am open to alternative method ...

javascriptajaxprototypejs

AngularJS's ScrollTo function allows users to scroll to a specific

Trying to implement a quick nav that smoothly scrolls to different sections on the page when a link is clicked. Currently using a guide provided by Treehouse for reference. $("#quickNav a").click(function(){ var quickNavId = $(this).attr("href"); ...

javascriptjqueryangularjsscrollanchor

Tips for shifting a designated row upward in Chrome using JavaScript

Currently, I am working on a Javascript function that moves up a selected row. However, the issue I am facing is that when the row moves up, the old row is not being removed. For instance, if I move up the 'bbbb' row, it successfully moves up bu ...

javascriptjqueryhtmljquery-ui