Categories

See More
Popular Forum

MBA (4887) B.Tech (1769) Engineering (1486) Class 12 (1030) Study Abroad (1004) Computer Science and Engineering (988) Business Management Studies (865) BBA (846) Diploma (746) CAT (651) B.Com (648) B.Sc (643) JEE Mains (618) Mechanical Engineering (574) Exam (525) India (462) Career (452) All Time Q&A (439) Mass Communication (427) BCA (417) Science (384) Computers & IT (Non-Engg) (383) Medicine & Health Sciences (381) Hotel Management (373) Civil Engineering (353) MCA (349) Tuteehub Top Questions (348) Distance (340) Colleges in India (334)
See More
( 6 months ago )

Bootstrap navbar dropdown list not working properly

General Tech Learning Aids/Tools
Max. 2000 characters
Replies

usr_profile.png
Pooja Bhardwaj

User

( 6 months ago )

Check the css and js you have used. If you add these Cdn will solve your problem

<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>

The 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 
								 								 
							usr_profile.png
							
Vanshika Bhatt

User

( 6 months ago )

 

I'm having a problem with the dropdown list in the navigation bar. It was working properly last night but i don't know what happened the bootstrap stopped working only for the dropdown list. Please help me out of this.Bootstrap file link is working properly because its working for the whole page but not working for navbar dropdowns only.

 

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

what's your interest