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

Hiding HTML Labels with Jquery

I have a label that I want to hide initially and then display with the resultant values when the Submit event of the dialog box occurs. The label should not be visible at first, which is correct. However, even after clicking the submit button, it is not sh ...

jquerycsslabel

Checking for radio button selection with JQuery on page load

Is it possible to use jQuery to automatically select a specific radio button upon the page loading? I am looking for a way to set a particular radio button item as checked using jQuery when the page is initially loaded. Can this be achieved with jQuery?r ...

jquery

Jumping Sticky Table Headers

Looking for a solution to prevent the table header from moving when scrolling through the data: tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sti ...

htmlcss

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Tips for fixing alignment problems using CSS

I am experiencing a problem where I am unable to figure out how to align the content in one column with text positioned next to it in a right-aligned format. /* Personal Details */ .personal-info { width: 90%; padding: 25px; border-bottom: 1px so ...

htmlcss

Using Vuex: Bypassing Action and triggering Mutation directly within Component

When working with a vue.js app and utilizing vuex as the state management store, one may need to update a property's value in vuex. This can be achieved through two methods: One can dispatch an action method, which will then commit a mutation to a ...

javascriptvue.jsvuejs2vue-componentvuex

Why does Vue 3 refuse to refresh an <img> element, while it successfully refreshes all other components within the same component?

In my current Vue project, I have set up multiple link cards (<a class='card'></a>) inside a "deck" container (<div class='deck'></div>). The implementation for these elements is relatively straightforward: <s ...

javascriptnode.jsvue.jsvuejs3vue-component

Leveraging the X-Send module for efficiently delivering css, javascript, and image files

I am in the process of setting up a file server that currently serves downloadable files such as .doc and .zip perfectly using X-Send. Is it also possible to use X-Send for serving text-based (css/javascript) or image files? I believe this method is quite ...

phpcssfileserverx-sendfile

What strategies can be implemented to decrease the value of the writing box by 2.5%?

I would like to decrease the value in the input box by 2.5%. Here is the HTML code snippet: <div class="ZakatCalc"> <div class="calcimg"> <img src="" alt="" srcset="" class=" ...

javascripthtmljquerymathdom

Error encountered when attempting to resolve Angular UI Router provider

Having difficulty with integrating a resolve into a state using Angular UI router. Strangely, it works perfectly fine in another section of my code. I've organized my code into different component areas structured like this: /app /component-dashbo ...

javascriptangularjsangular-uiangular-ui-router

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3

AngularJS ng-focus does not function properly with iframes

Why isn't ng-focus working with iframe in AngularJS? What am I missing? Take a look at my code: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <iframe src="example.com" tabindex="-1" ng-fo ...

javascriptangularjsiframefocuslistener

Is there a way to retrieve the Marker that is being dragged when the event handler has already been bound?

How can I identify the Marker that is being dragged when the handler is a bound function? Take a look at this snippet from my react component: constructor() { this.handleMarkerMove = this.handleMarkerMove.bind(this); } createMarker() { const marker ...

javascriptreactjsgoogle-mapsgoogle-maps-markers

Angular.js hierarchical model issue: grandchildren functionality not functioning as expected

Currently, I am delving into the world of Angular and exploring its functionalities. My main goal is to construct a hierarchical data structure that can be easily manipulated using a hierarchical view: Root: - addChild - child 1: { remove, addChild, c ...

javascriptangularjsdata-bindinghierarchical-data

Tips on creating a responsive absolute div

I'm currently working on creating a profile component with Material UI and React.js. I'm having trouble making the Avatar/profile photo and profile name div responsive. Here are some screenshots to illustrate my issue: The specific div that need ...

javascriptcssreactjstwitter-bootstrapmaterial-ui

Sending an array to a component in Angular without the need for a controller

How can I pass an array to a component in Angular 1 without being inside a controller (using a component-only approach)? Currently, my starting point is: <user-list users="users"></user-list> The 'users' variable is a JavaScript arr ...

javascriptangularjs

What is the best way to ensure the initial item in an accordion group remains open by default when using NextJS?

I've successfully developed an accordion feature in NextJS from scratch and it's functioning flawlessly. However, I am looking to have the first item of the accordion open automatically when the page loads. Can anyone guide me on how to make this ...

javascriptreactjsarraysjsonnext.js

I am having trouble receiving responses when using mentionsInput in my Laravel project

Why am I not receiving any response while using the mentionsInput feature in my Laravel project? The data is correctly coming in JSON format, which I have verified. $(document).ready(function() { var token = $("#csrf-token").val(); $("textarea.menti ...

jqueryajaxinputmentionsinput.js

Tailwind Component Grid in Action

I'm trying to arrange a list of JavaScript components in a grid with one row and twelve columns. I want to use only six columns for the actual elements, while having three columns of padding on each side of the grid. My goal is to place three elements ...

javascriptreactjs

Assign the ng-repeat item to a variable in the controller's scope

Can anyone help me figure out how to pass a particular item from my view to a function in my controller? Here is the code: The view where I want to pass p.id <tr ng-repeat=" p in projetsListe"> <td>{{p.NomProjet}}</td> <td>{{c ...

javascriptangularjsangularjs-ng-repeat