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>
Related
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>
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!
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 want to implement full width mega menu in bootstrap. here is markup for menu:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#"><b>eTouch</b></a></div>
<div>
<ul class="nav navbar-nav">
<li><a data-toggle="tab" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a>
<ul class="dropdown-menu mega-dropdown-menu row">
<div class="megamenu-headline"><h2>ODC VEGETABLES STORE</h2></div>
<li class="divider"></li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li>Unique Features</li>
<li>Image Responsive</li>
<li>Auto Carousel</li>
<li>Newsletter Form</li>
<li>Four columns</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li>Good Typography</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li>Unique Features</li>
<li>Image Responsive</li>
<li>Auto Carousel</li>
<li>Newsletter Form</li>
<li>Four columns</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li>Good Typography</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Jackets</li>
<li>Easy to customize</li>
<li>Glyphicons</li>
<li>Pull Right Elements</li>
<li class="divider"></li>
<li class="dropdown-header">Pants</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
<li>Calls to action</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li>Default Navbar</li>
<li>Lovely Fonts</li>
<li>Responsive Dropdown </li>
<li class="divider"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group"><label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
</ul>
</li>
</ul>
</li>
<li> <span class="glyphicon glyphicon-user"></span> About </li>
<li> <span class="glyphicon glyphicon-wrench"></span> Services </li>
<li> <span class="glyphicon glyphicon-ok"></span> Solutions </li>
<li> <span class="glyphicon glyphicon-briefcase"></span> Products </li>
<li> <span class="glyphicon glyphicon-list"></span> Skills </li>
<!-- <li> <span class="glyphicon glyphicon-cog"></span> Industries </li>-->
<li> <span class="glyphicon glyphicon-picture"></span> Portfolio </li>
<li> <span class="glyphicon glyphicon-pencil"></span> Blog </li>
<li> <span class="glyphicon glyphicon-comment"></span> Contacts </li>
</ul>
</div>
</div>
</nav>
now i want full width mega menu on hover each element. like home, about, services etc
You are doing wrong here data-toggle="tab"
<li><a data-toggle="tab" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a>
Should be data-toggle="dropdown"
<li><a data-toggle="dropdown" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a>
Fiddle
Also Here is a mega menu I created for another answer, gives you complete idea what to do and what not to do.
I am using Admin Panel it works fine when I am using it without some modification.
But when I make some changes like removing page-wrapper div inside the wrapper div, I am not able to use the dropdown feature and all collapsing links are active by default.
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>
<!-- /#wrapper -->
Where am I missing something?
Here is how it looks like.