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> Home </li>
<li> About</li>
<li> History </li>
<li> Vision & Mission </li>
<li> Objectives </li>
<li> Messages </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> Undergraduate </li>
<li> Graduate </li>
<li> Departments</li>
<li> Rules and Policies </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> Admission Overview </li>
<li> Financial Aid </li>
<li> Scholarships </li>
<li> Fee Structure </li>
<li> Admission Procedure </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> Department of Electrical Engineering </li>
<li> Department of Computing & Technology </li>
<li> Department of Civil Engineering </li>
<li> Department of Management Science </li>
<li> Department of Life Science </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> Projects </li>
<li> Publications </li>
<li> Abasyn Intl. Conference </li>
<li> Journal of Social Sciences </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> Activities & Clubs </li>
<li> Student Handbook</li>
<li> Community Services</li>
<li> Student Schedules </li>
<li> Digital Library </li>
<li> Learning Management System </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>About the Center</li>
<li>OBE at AUIC</li>
<li>Software System - TLS</li>
<li> Research and Analysis</li>
</ul>
</li>
</div>
</div>
This is the output
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> Home </li>
<li> About</li>
<li> History </li>
<li> Vision & Mission </li>
<li> Objectives </li>
<li> Messages </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> Undergraduate </li>
<li> Graduate </li>
<li> Departments</li>
<li> Rules and Policies </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> Admission Overview </li>
<li> Financial Aid </li>
<li> Scholarships </li>
<li> Fee Structure </li>
<li> Admission Procedure </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> Department of Electrical Engineering </li>
<li> Department of Computing & Technology </li>
<li> Department of Civil Engineering </li>
<li> Department of Management Science </li>
<li> Department of Life Science </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> Projects </li>
<li> Publications </li>
<li> Abasyn Intl. Conference </li>
<li> Journal of Social Sciences </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> Activities & Clubs </li>
<li> Student Handbook</li>
<li> Community Services</li>
<li> Student Schedules </li>
<li> Digital Library </li>
<li> Learning Management System </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>About the Center</li>
<li>OBE at AUIC</li>
<li>Software System - TLS</li>
<li> Research and Analysis</li>
</ul>
</li>
</div>
<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> Home </li>
<li> About</li>
<li> History </li>
<li> Vision & Mission </li>
<li> Objectives </li>
<li> Messages </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> Undergraduate </li>
<li> Graduate </li>
<li> Departments</li>
<li> Rules and Policies </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> Admission Overview </li>
<li> Financial Aid </li>
<li> Scholarships </li>
<li> Fee Structure </li>
<li> Admission Procedure </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> Department of Electrical Engineering </li>
<li> Department of Computing & Technology </li>
<li> Department of Civil Engineering </li>
<li> Department of Management Science </li>
<li> Department of Life Science </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> Projects </li>
<li> Publications </li>
<li> Abasyn Intl. Conference </li>
<li> Journal of Social Sciences </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> Activities & Clubs </li>
<li> Student Handbook</li>
<li> Community Services</li>
<li> Student Schedules </li>
<li> Digital Library </li>
<li> Learning Management System </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>About the Center</li>
<li>OBE at AUIC</li>
<li>Software System - TLS</li>
<li> Research and Analysis</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Related
I have a problem with a bootstrap navbar. In the mobile view the navbar should open on click, but it is open already, when the page is loaded.
I guess it is just a simple mistake, but I just cannot find it.
If somebody knows, please tell me! :-)
Philip
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container container-navigation">
<div class="row">
<div class="col-md-10 col-lg-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#fws-navbar" aria-controls="fws-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- text logo on mobile view -->
<a class="navbar-brand visible-xs" href="index.htm">Fahrrad-Workshop Sprockhövel</a>
</div>
<div id="fws-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-dropdown">
<i class="fa fa-wrench fa-fw"></i> Mountainbike <span class="caret"></span>
<ul class="dropdown-menu">
<li>Übersicht MTB-Workshop
</li>
<li role="presentation" class="divider"></li>
<li>Schaltung und Umwerfer
</li>
<li>Kette und Kassette
</li>
<li>Felgen-/Scheibenbremsen
</li>
<li>Innenlager und Kurbel
</li>
<li>Laufräder und Naben
</li>
<li>Gabel und Steuerkopf
</li>
<li>Federgabel und Dämpfer
</li>
<li>Züge und Außenhüllen
</li>
<li>Lenker und Griffe
</li>
<li>Klickpedale
</li>
</ul>
</li>
<li class="nav-dropdown">
<i class="fa fa-wrench fa-fw"></i> Rennrad <span class="caret"></span>
<ul class="dropdown-menu">
<li>Übersicht Rennrad-Workshop
</li>
<li role="presentation" class="divider"></li>
<li>Schaltung und Umwerfer
</li>
<li>Kette und Kassette
</li>
<li>Felgenbremsen
</li>
<li>Innenlager und Kurbel
</li>
<li>Laufräder und Naben
</li>
<li>Gabel und Steuerkopf
</li>
<li>Federgabel und Dämpfer
</li>
<li>Züge und Außenhüllen
</li>
<li>Lenker und Griffe
</li>
<li>Klickpedale
</li>
</ul>
</li>
<li class="nav-dropdown">
<i class="fa fa-wrench fa-fw"></i> Trekkingrad <span class="caret"></span>
<ul class="dropdown-menu">
<li>Übersicht Trekkingrad-Workshop
</li>
<li role="presentation" class="divider"></li>
<li>Schaltung und Umwerfer
</li>
<li>Kette und Kassette
</li>
<li>Felgenbremsen
</li>
<li>Innenlager und Kurbel
</li>
<li>Laufräder und Naben
</li>
<li>Gabel und Steuerkopf
</li>
<li>Federgabel und Dämpfer
</li>
<li>Züge und Außenhüllen
</li>
<li>Lenker und Griffe
</li>
</ul>
</li>
<li class="nav-dropdown">
<i class="fa fa-wrench fa-fw"></i> E-Bike <span class="caret"></span>
<ul class="dropdown-menu">
<li>Übersicht E-Bike-Workshop
</li>
<li role="presentation" class="divider"></li>
<li>Vorderrad-Antrieb einbauen
</li>
<li>Hinterrad-Antrieb einbauen
</li>
<li>Vergleich-Hinterradantrieb
</li>
<li>Elektro-Antrieb-Pflege
</li>
<li>Workshop-Akku
</li>
<li>Schutzhülle
</li>
<li>Umbau Hinterrad 28 Zoll
</li>
</ul>
</li>
<li class="nav-dropdown">
<a href="tipps.htm" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bicycle fa-fw"></i> Tipps <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Übersicht Tipps
</li>
<li role="presentation" class="divider"></li>
<li>Putzen, Pflegen und Warten
</li>
<li>Ergonomie: richtige Sitzposition
</li>
<li>Schrauben richtig anziehen
</li>
<li>Carbonteile montieren
</li>
<li>Platten beheben
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Suche -->
<div class="col-md-2 col-lg-3 suche">
<form action="">
<div class="input-group">
<input type="text" class="form-control input-search" placeholder="Suche" />
<span class="input-group-btn">
<button class="btn btn-default no-border-left" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have a little problem with my dropdown menu. I can't get it to work. I've been searching for a few hours already and still nothing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center">
<li> <img src="img/wts-logo.png" style="width:40px; height:40px;" alt="World Travel Show" /> </li>
<li aria-haspopup="true" aria-expanded="false" class="dropdown" ><a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a><span class="caret"></span>
<ul class="dropdown-menu">
<li>O TARGACH</li>
<li>SALONY</li>
<li>DOJAZD</li>
<li>DLA MEDIÓW</li>
</ul>
</li>
<li> <a class="page-scroll" href="podroznicy.html">PODRÓŻNICY</a> </li>
<li> <a class="page-scroll" href="#adoba">ATRAKCJE</a> </li>
<li> <a class="page-scroll" href="#harmonogram">HARMONOGRAM</a> </li>
<li> <a class="page-scroll" href="#dojazd">DOJAZD</a> </li>
<li> <a class="page-scroll" href="#salony">SALONY</a> </li>
<li> <a class="page-scroll" href="#dla_wystawcow">O TARGACH</a> </li>
<li> <a class="page-scroll" href="#wystawcy">WYSTAWCY</a> </li>
<li> <a class="" href="http://targi.kadryturystyki.pl/" target="_blank">SZKOLENIA</a> </li>
<li> DLA MEDIÓW </li>
<li> <a class="page-scroll" href="#contact">KONTAKT</a> </li>
<li> <a class="page-scroll hidden-xs" href="#contact" id="logopwe" style="display:none;"><img src="img/pwe-logo.png" alt="Ptak Warsaw Expo" style="height:40px; width:40px;" /></a> </li>
</ul>
</div>
CodePen
The <span class="caret"></span> has to be inside the dropdown <a>...</a> tag.
Change
<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#page-top">WORLD TRAVEL SHOW</a> <span class="caret"></span>
to
<a data-toggle="dropdown" class="dropdown-toggle page-scroll" href="#">WORLD TRAVEL SHOW <span class="caret"></span></a>
Bootply
http://www.bootply.com/wS18cO4pfA
Here is how I use Bootstrap dropdown, and it works fine:
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button</button>
<ul class="dropdown-menu">
<div>Something</div>
</ul>
</div>
Good luck!
my navbar
Hi, this is the code that i have used
<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="">
<div class="nav navbar-nav navbar-left" style="margin-top:15px;">
<img src="images/logostack.gif" alt="logo">
</div>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Something</li>
<li>Meet the Experts</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Shortcomings</li>
<li>Complications</li>
<li>Stakeholders</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Statistics </li>
<li>Profile Patient</li>
<li>Burden Economical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Management Approach</li>
<li>Algorithms & Protocols</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Non Critical</li>
<li>Critical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Videos </li>
<li>Images </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Post your Query</li>
<li>Experts Council</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..
I've searched and maybe this will help.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
Link to article:
Center content in responsive bootstrap navbar
You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.
#media only screen and (max-width:--px)
{
//your nav-bar code goes here
}
You have to take a row top of the navbar.
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
// Your navbar code
</nav>
</div>
Full code according to your question:
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" >
<!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
About Something
</li>
<li>
Meet the Experts
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Shortcomings
</li>
<li>
Complications
</li>
<li>
Stakeholders
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Statistics
</li>
<li>
Profile Patient
</li>
<li>
Burden Economical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Management Approach
</li>
<li>
Algorithms & Protocols
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Non Critical
</li>
<li>
Critical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Modules
</li>
<li>
Videos
</li>
<li>
Images
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Post your Query
</li>
<li>
Experts Council
</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
</nav>
</div>
You have to know about Bootstrap Grid.
In bootstrap3 I am trying to remove horizontal scroll bar in mobile it looks fine in desktop view but in mobile view the horizontal bar is shown I read that horizontal bar comes due to container-fluid so to I used tag but it is not work
here is the code
<nav class="navbar navbar-inverse">
<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" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
You can use:
overflow:hidden;
in css or declarate it deirect in the html:
<style type="text/css">
.container-fluid {
overflow-x:hidden;
overflow-y:hidden;
overflow:hidden;
}
</style>
I hope it helps
Everything looks fine to me. You probably have some custom CSS doing something wrong. I even tried excluding "viewport" meta tag, still doesn't show overflow.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
<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" href="#">RG ACADEMY</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About us <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>About Academy</li>
<li>Faculty Team</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Courses <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS+ADVANCED</li>
<li>JEE MAINS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Results <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE 2015</li>
<li>JEE MAINS 2015</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Exams Info <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>JEE MAINS + ADVANCED</li>
<li>BITSAT</li>
<li>KVPY</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Downloads<span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li>IIT JEE Solutions</li>
<li>JEE MAINS</li>
<li>KVPY</li>
</ul>
</li>
<li>Enquiry</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyhicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I am building a site here:
Website Link
The drop-down navbar menu is working fine except the fact that when there is a mouse-over on the items to the right of the navbar, the first drop-down menu activates. (i.e. Click on Administration and both its drop-down menu and the drop-down menu under "who are we" also drops down!)
Any further suggestions, please?
The code is as follows:
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
-->
Toggle navigation
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li>
_Vet Clinics
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
Any help in seeing where the problem is would be gratefully received as my eyes are going after hours of tring nto find the problem.
Many Thanks
Update:
I have applied the solution proposed by #Spade but the situation remains.
Using [link]http://apaaportugal.doidosou.eu/useful_links.php as a test page (no carousel) onmouseover on any dropdown menu item also activates the first drop-down under item "_who are we".
Javascript code on the page is:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Sub-Menu JavaScript -->
<script src="js/sub_menu.js"></script>
<!-- header script -->
<script>
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
</script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.min.js"></script>
<script>
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
</script>
Navbar Html code as follows:
<!-- Header Content -->
<div class="container">
<div class="row">
<div class="col-lg-1">
<img src="/images/APPA_logo_R_80.png"><a class="navbar-brand" href="#"></a>
</div>
<div class="col-lg-11">
<div>
<h1 class="h_header">APAA - Association for the Protection of Animals in the Algarve</h1>
<h3 class="h_header">Associação de Protecção Animal do Algarve</h3>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container dropdown">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header dropdown">
<!-- <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown" id="bs-example-navbar-collapse-1" data-hover="dropdown">
<ul class="nav navbar-nav navbar-right dropdown">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Two things need to be changed:
1) Replace "Script to Activate the Carousel" with the following:
$(function() {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$(window).resize(function() {
var width = $(this).width();
if (width < 769) {
$('.navbar .dropdown').removeClass('test');
} else {
$('.navbar .dropdown').addClass('test');
}
});
});
2) Replace the code you shared for Navigation with the following:
<!-- Navigation -->
<nav id="myNav" class="navbar navbar-inverse navbar-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1" data-toggle="dropdown">
<ul class="nav navbar-nav">
<li>
_Home
</li>
<li class="dropdown">
_Who are we?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_About the Association
</li>
<li class="">
_Objectives
</li>
<li class="dt_bg">
_Quem Somos?
</li>
</ul>
</li>
<li class="dropdown">
_How do we help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Snips
</li>
<li>
_Other
</li>
<li class="dt_bg">
_Forms
</li>
</ul>
</li>
<li class="dropdown">
_How can <strong>You</strong> help?<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Our Shops
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Alvor
</li>
<li>
_Albufeira
</li>
<li class="dt_bg">
_Silves
</li>
</ul>
</li>
<li>
_Fundraising
</li>
<li class="dt_bg">
_Membership
</li>
</ul>
</li>
<li class="dropdown">
_Latest News<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Upcoming Events
</li>
<li>
_Other
</li>
</ul>
</li>
<li class="dropdown">
_Administration<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Structure of the association
<ul class="dropdown-menu sub-menu">
<li class="dt_bg dropdown">
_Management Board
</li>
<li>
_Fiscal Council
</li>
<li class="dt_bg">
_Annual General Assembly
</li>
</ul>
</li>
<li>
_Reports & Accounts
</li>
</ul>
</li>
<li class="dropdown">
_Useful Links<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dt_bg dropdown">
_Algarve - Veterinary Surgeries
</li>
<li>
_Algarve - Other animal-related institutions
</li>
</ul>
</li>
<li>
_Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Also Attaching the result at my side: