Troubles with Bootstrap's navbar dropdown menu functionality

I seem to be encountering a problem with the dropdown list in my navigation bar. It was functioning correctly yesterday, but something seems to have gone awry as Bootstrap is no longer working for the dropdowns only. I'm puzzled as to why this sudden issue has cropped up. I'd greatly appreciate any assistance you can provide. The link to the Bootstrap file appears to be functional since it's working for the entire page except for the navbar dropdowns.

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

<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
...

Here is what the output looks like.

htmlcss

Answer №1

Make sure to check the css and js files that you have used. By adding these CDN links, your issue should be resolved.

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

Here is the suggested solution:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
        <a class="navbar-brand name-style" href="#"><span style="color: #4dc47d;">Abasyn Univeristy Islamabad Campus</span></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Home
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="index.php"> Home </a></li>
      <li><a href="about.php"> About</a></li>
      <li><a href="history.php"> History </a></li>
                <li><a href="vision.php"> Vision & Mission </a></li>
      <li><a href="objectives.php">  Objectives </a></li>
                <li><a href="messages.php">   Messages </a></li>

            </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Programs
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="undergrad.php">  Undergraduate </a></li>
      <li><a href="graduate.php"> Graduate </a></li>
      <li><a href="departments.php"> Departments</a></li>
                <li> <a href="policies.php"> Rules and Policies </a> </li>
    </ul>
  &li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Admission
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="addmission.php">  Admission Overview </a></li>
      <li><a href="financialAid.php"> Financial Aid </a></li>
      <li><a href="Scholarship.php"> Scholarships </a></li>
                <li><a href="fee_Structure.php">  Fee Structure </a></li>
                <li><a href="addmission_procedure.php">  Admission Procedure </a></li>

    </ul>
  </li>
        // more navigation code //
    
</div>

Answer №2

<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
        <a class="navbar-brand name-style" href="#"><span style="color: #4dc47d;">Abasyn University Islamabad Campus</span></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Home
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="index.php"> Home </a></li>
      <li><a href="about.php"> About</a></li>
      <li><a href="history.php"> History </a></li>
                <li><a href="vision.php"> Vision & Mission </a></li>
      <li><a href="objectives.php"> Objectives </a></li>
                <li><a href="messages.php"> Messages </a></li>

            </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Programs
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="undergrad.php"> Undergraduate </a></li>
      <li><a href="graduate.php"> Graduate </a></li>
      <li><a href="departments.php"> Departments</a></li>
                <li> <a href="policies.php"> Rules and Policies </a> </li>
    </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Admission
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="addmission.php"> Admission Overview </a></li>
      <li><a href="financialAid.php"> Financial Aid </a></li>
      <li><a href="Scholarship.php"> Scholarships </a></li>
                <li><a href="fee_Structure.php"> Fee Structure </a></li>
                <li><a href="addmission_procedure.php"> Admission Procedure </a></li>

    </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Faculty
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="electrical_engineering.php"> Department of Electrical Engineering </a></li>
      <li><a href="computing.php"> Department of Computing & Technology </a></li>
      <li><a href="civil_enginnering.php"> Department of Civil Engineering </a></li>
                <li><a href="management_sciences.php"> Department of Management Science </a></li>
                <li><a href="life_sciences.php"> Department of Life Science </a></li>
    </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Research
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="projects.php"> Projects </a></li>
      <li><a href="publications.php"> Publications </a></li>
      <li><a href="conference.php"> Abasyn Intl. Conference </a></li>
                <li><a href="journal.php"> Journal of Social Sciences </a></li>
            </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Students
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="activities.php"> Activities & Clubs </a></li>
      <li><a href="http://abasynisb.edu.pk/pdf/Handbook-final-draft.pdf"> Student Handbook</a></li>
      <li><a href="community.php"> Community Services</a></li>
                <li><a href="student_schedules.php"> Student Schedules </a></li>
      <li><a href="digital_library.php">>Digital Library</a></li>
      <li><a href=""> Learning Management System </a></li>
    </ul>
  </li>
        <li class="dropdown">
    <a class="dropdown-toggle list-bold" data-toggle="dropdown" href="#">Center of M & E
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">About the Center</a></li>
      <li><a href="#">OBE at AUIC</a></li>
      <li><a href="#">Software System - TLS</a></li>
                <li><a href="#"> Research and Analysis</a></li>

            </ul>
  </li>
        </ul>
</div>
    </div>
    </nav>

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

Apply borders to the table provided in the email using Python

Presently, I am utilizing this approach for sending tables in emails via Python instead of attaching them: Send table as an email body (not attachment) in Python import smtplib from smtplib import SMTPException import csv from tabulate import tabulate te ...

pythonhtmlemailsmtplib

Retrieve HTML content from Vuetify components without displaying it on the webpage

I have a project where I need to retrieve the HTML code from various Vuetify components. Instead of just as a HTML string, I actually need it as a DOM element that can be easily added to the body. This is necessary for me to be able to utilize these compon ...

javascripthtmlvue.jsdomvuetify.js

The art of organizing dates and times

Need help with formatting a datetime that is retrieved from the database. The current format is as follows: 2012-06-11 21:39:54 I would like to display it in the format of June 11. Any suggestions on how this can be achieved? Thank you! ...

phpmysqlhtml

`switch tabs visibility based on checkbox selection`

There are 4 tabs available on a JSP page: Tab 1, Tab2, Tab3, and Tab4. Initially, only Tab1 is enabled, allowing users to freely work within that tab. However, Tabs 2, 3, and 4 are disabled, preventing users from accessing their contents. A checkbox is lo ...

javascriptjquerycssajaxjsp

How to implement a Django block for loading CSS files

I have multiple pages and I need to load unique CSS for each page. I am using this method for all static files. In the head of my index.html file, I have the following code: {% block css %} {% endblock %} However, in my contact.html file, I have the fol ...

cssdjangostatic

PhantomJS encountered a TypeError when trying to access a non-existent object during the evaluation of 'document.getElementById()'

Recently, I delved into the world of PhantomJS and its ability to extract data from websites through JavaScript. This process is commonly referred to as web scraping. My goal was to retrieve the text content of an element by its ID. However, I encountered ...

javascripthtmldomweb-scrapingphantomjs

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Press the button to automatically scroll to a designated div section

One of the challenges I'm facing involves a fixed menu and content box (div) on a webpage. Whenever I click on the menu, the content box should scroll to a specific div. Initially, everything was working fine. Here is a sample of it in action: http ...

javascriptjqueryhtmlcss

Go back to the top by clicking on the image

Can you help me with a quick query? Is it feasible to automatically scroll back to the top after clicking on an image that serves as a reference to jQuery content? For instance, if I select an image in the "Portfolio" section of , I would like to be tak ...

javascriptjqueryhtmlreturnanchor

Select a color by inputting the type as "color" while leaving a space between the border and

I'm having an issue with the color input There seems to be a gap between the black border and the actual color, but I want to get rid of it #color-picker { border: 5px solid black; border-radius: 5px; width: 207px; height: 60px; padding: ...

htmlcsspadding

Organizing playing cards in a React JS application

As a beginner just starting out with React JS, I'm working on arranging cards in a medium size for my application. I came across a card design that I like and I'm seeking help to achieve something similar. Any assistance would be greatly apprecia ...

cssreactjscard

Guide on presenting an image retrieved from a database with ajax

I am currently developing a straightforward mobile application that utilizes a database to store various types of content, including images. I have implemented ajax requests to retrieve this information and display it within the app. However, I am encounte ...

javascriptphphtmljsonajax

The HTML table inexplicably displays a random comma out of nowhere

When working on my HTML table, I noticed that it was rendering a comma unexpectedly. I am using Nodemailer and SMTP Google server, and I suspect the issue lies within the HTML code. However, I am struggling to identify the exact problem. https://i.stack.i ...

javascripthtmlnode.jsmongodbnodemailer

Using CSS3 to target the final <li> element within the main list in a nested <ul> structure

I have a complex list structure: <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li> <ul> <li>Nested Item</li> <li>Nested Item</li> <li>L ...

csscss-selectors

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

javascriptjquerycssajaxphotoswipe

View does not display initial value selected in ReactJS

I'm having trouble setting an initial value for a select element that isn't displaying in the view. Here's my JSX: var SelectOKNO = React.createClass({ render() { return ( <div> <select className="selectpicker" ...

htmlreactjsjsx

Having trouble with Github pages' responsiveness on certain devices

The responsive view in the browser appears to be working correctly. Everything is functioning fine. However, when I switch to my Android phone, the alignment is off. I've tested it on multiple devices and the results are consistent. What could be cau ...

htmlcssresponsive-designresponsiveresponsive-images

Connecting the search results page with the specific details page

Currently, I am developing a results page for my website and require assistance with linking each restaurant to a detail.php page. The project involves showcasing all the restaurants in San Francisco along with their health inspection scores, address, and ...

javascriptphpjqueryhtmlmysql

Angular - The confirmDialog from Primeng is appearing hidden behind the modal from ng-bootstrap

I am currently utilizing the primeng and ng-bootstrap components to develop an angular-based website. In order to collect data, I have implemented a form within an ng-bootstrap modal. However, upon clicking the "save" button on the modal, the primeng conf ...

htmlangularnpmprimengng-bootstrap

Showing user data in a div using JavaScript ajax without the use of jQuery

Recently diving into the world of javascript and ajax, I find myself tinkering with code on jsfiddle. My current goal is to populate a list with usernames and emails upon form submission. Upon submitting the form, an error message pops up: {"error":"key m ...

javascripthtmlajax