Twitter bootstrap dropdown menu not displaying - javascript

My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-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>
</div>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>


Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.

Related

NavBar doesn't collapse in admin-Folder from ASP-Page

i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<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" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Accordion inside Bootstrap navbar dropdown

Please refer: APEC Energy
In the right corner, there is a user icon. On clicking it, we can see an accordion in the dropdown menu. How can this be achieved?
I have put together a JSFiddle with the basic code. I removed all my trials of the accordion because whatever I tried only breaks the code.
My code for the navbar:
<!-- Navigation -->
<div id="gxcpl" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand hidden-lg hidden-md" href="#">Living Ahimsa</a>
<a class="hidden-sm hidden-xs" href="#">
<img class="gxcpl-logo" src="assets/images/logo.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Homes
<ul class="dropdown-menu" role="menu">
<li>Introduction</li>
<li>Innovation</li>
<li>Services</li>
<li>Development</li>
<li>Future</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Energy
<ul class="dropdown-menu" role="menu">
<li>BIO Heating</li>
<li>BIO Lighting</li>
<li>BIO Air</li>
<li>BIO Frequency</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Water
<ul class="dropdown-menu" role="menu">
<li>Whole House Filter</li>
<li>Reverse Osmosis</li>
<li>Portable Filters</li>
<li>Portable Storage</li>
<li>Rain Water Storage</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Garden
<ul class="dropdown-menu" role="menu">
<li>Bio Grow System</li>
<li>Bio Watering System</li>
<li>Indoor Growing</li>
<li>Organic Seeds</li>
<li>Organic Plants</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Health
<ul class="dropdown-menu" role="menu">
<li>Core Health</li>
<li>Oils</li>
<li>Raw Foods</li>
<li>Natural Supplements</li>
<li>Protien</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-angle-down"></i> <i class="fa fa-user-o"></i>
<ul class="dropdown-menu" role="menu">
<li>Shopping Basket</li>
<li>Contact Us</li>
<li>Call Request</li>
<li>Account Settings</li>
<li>Login/Register</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Navigation -->

Your JSFiddle seems to have accordion menu. I don't understand, what behaviour is missing?

How to hide navbar collapse when we click on outside?

I am facing the issue in when i click on the icon bar the drop down menu opens and then when i click on the another menu (Alumini menu ) ,the iconbar's drop down menu is not closed but both the alumini menu and the icon bars dropdown menu is viewed.I don't know why the iconbar's drop down menu is not closed while clicking the alumini menu.
The html code for design is uploaded below.
<div class="join">
<!-- Nav Starts -->
<nav class="navbar navbar-default container-fluid wrap">
<div class="container pos-relative">
<div class="navbar-header">
<ul class="new pull-left">
<li class="old"> <img class="img-responsive" src="<?php bloginfo( 'template_url' ); ?>/images/skv-logo-100px.png"></img> </li>
<li> <a class="navbar-brand create hidden-xs" href="http://localhost/wordpress">SKV Vidhyaashram</a> </li>
</ul>
<ul class="nav navbar-nav navbar-main pull-left hidden-xs">
<li>News & Events</li>
<li>Toppers</li>
<li>Achievements</li>
<li>ISA Activities</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Alumni</a>
<ul class="dropdown-menu alumni-menu">
<li>Alumni Home</li>
<li>Committee Members</li>
<li>Gallery</li>
<!-- <li>Events</li> -->
</ul>
</li>
<li><a class="user-icon" href="http://dev.seyali.com/alumni_demo/public/login" data-toggle="tooltip" data-placement="right" title="Login"> <span class="glyphicon glyphicon-user"></span></a></li>
</ul>
<button type="button" class="quicklinkbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#quicklinkbar" aria-expanded="false" aria-controls="quicklinkbar">
<span class="sr-only">Toggle navigation</span>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> About Us<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Chairman's Notes</li>
<li>Mission & Vision</li>
<li>Principal's Notes</li>
</ul>
</li>
<li class="dropdown list">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>CBSE Circular</li>
<li>Academic Objectives</li>
<li>CBSE & Afflitation</li>
<li>Grades Prekg to X</li>
<li>Innovative Teaching Methods</li>
<li>Labs & Library</li>
<li>Prekg,Juniorkg & Seniorkg</li>
<li>School Terms & Curriculum</li>
</ul>
</li>
<li class="dropdown list1">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Beyond-Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Co-curricular</li>
<li>Extra-curricular</li>
<li>Life at SKV</li>
</ul>
</li>
<li class="dropdown list2">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Sports & Games<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Sports Activities</li>
<li>Sports Facilities</li>
</ul>
</li>
<li class="dropdown list3">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Admission Fees<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Registration & Admission</li>
<li>Entrance Examination</li>
<li>Fees & Payment</li>
</ul>
</li>
<li class="dropdown list4">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Gallery<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Image Gallery 2014-2015</li>
<li>Image Gallery 2016-2017</li>
<li>Video Gallery</li>
</ul>
</li>
<li class="dropdown list5">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Careers<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Working at SKV</li>
<li>Positions Vacant</li>
<li>General Information</li>
<li>Apply Online</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<div id="quicklinkbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>News & Events</a></li>
<li><a>Toppers</a></li>
<li><a>Achievements</a></li>
<li><a>ISA Activities</a></li>
<li><a>Alumni</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Nav Ends -->
And the image is attached below
In above attached the two menus are apperaing , in that when i click on the icon bar drop down menu o[pens and again when i click on the alumini menu alumini menu opens but iconbars drop down menu is not closed.Please help me how to solve this.

ebay and bootstrap: collapse menu in javascript

As someone probably know - eBay doesn't respect eg. jQuery. I want make responsive template with responsive menu, but I don't known what should I do with menu. I must delete all jQuery from bootstrap and now menu toggle doesn't work on eg. smartphones. What should I do?
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-headerOne">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Store</li>
<li>Payments</li>
<li>Shipping</li>
<li>Returns</li>
<li>Terms</li>
<li>Gurantee</li>
<li>Abous us</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>

To create these menus without javascript you have to use some CSS. Maybe this link will help you for similar problems: bootstrap-without-jquery
Here is a solution for your particular problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Dropdown without JS */
.dropdown-toggle:focus {
pointer-events: none;
}
.dropdown-toggle:focus + .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dropdown-menu {
opacity: 0;
display: block;
visibility: hidden;
transition: visibility 0.5s;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="dropdown-toggle navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu" style="position:absolute;right:0;">
<li class="">
menu1 <span class="sr-only">(current)</span>
</li>
<li class="">
menu2 <span class="sr-only">(current)</span>
</li>
<li class="dropdown active">
menu3 <span class="sr-only">(current)</span>
</li>
<li class=""><a href="/menu3/submenu1/">submenu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu3/submenu2/">submenu2
<span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="navbar-brand" href="/"
style="background: white; padding-left: 50px;">App</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a href="/menu1/">menu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu2/">menu2
<span class="sr-only">(current)</span></a>
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="">A</li>
<li class="">B</li>
<li class="">C</li>
<li class="">D</li>
</ul>
</li>
<li class=""><a href="/menu3/submenu1/">menu3
<span class="sr-only">(current)</span></a>
</li>
</ul>
<i class="navbar-text navbar-right">
Logout
</i>
</div>
</div>
<!-- /.container-fluid -->
</nav>

issues with navbar links not collapsing

firstly apologies opening a question on which should be seen as a fairly simple issue....and it should be, but I cant get it working to save my life.
Maybe someone can just give this code a quick scan and tell me what I am doing wrong, as I am not to familiar with bootstap (which im using here) and HTML5
My Problem
Navbar working perfectly on home page but when copy and pasting navbar to other pages the services and menu links simply do not expand / collapse
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="index.html">Finger Food Catering</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="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hot Platters</li>
<li>Cold Platters</li>
<li>Gourmet Platters</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Wedding Catering</li>
<li>Birthday Catering</li>
<li>Corporate Catering</li>
<li>Event Catering</li>
<li>Funeral Cateringg</li>
</ul>
</li>
<li>About</li>
<li>Testimonials</li>
<li>Inquire</li>
<li>Blog</li>
<li class="active">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span style="font-size:2.0em"><span style="color:#8AB8E6">Contact Us:</span> <body onload="_googWcmGet('number', '1300 785 701')">
<span class="number">1300 785 701</span>
</body> </a></li>
</ul>
</div>
</div>
</nav>

Are you using Materialize?
If you are, scroll down to the bottom of index.php where the scripts are and change <script src="../../bin/materialize.js"></script> to <script src="js/materialize.js"></script>

Categories

Resources