I have a problem with my nav bar with bootstrap when using mobile devices (touch).
If I'm using a computer, the nav bar works fine, but if is a touch device the dropdown is hidden if try to select a option.
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="/webga/index/index">Inicio</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" data-target=".nav-collapse">
Cadastros <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Empresa</li>
<li>Empreendedor</li>
<li>Empreendimento</li>
<li>Atividades</li>
<li>Sub-Atividades</li>
<li><a
href="<c:url value="/responsavel/novoResponsavel"/>">Responsavel
Técnico</a></li>
<li>Documentações</li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Consultas <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Processos</li>
<li>SubAtividades</li>
<li>Legislações</li>
<li>Documentos</li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Solicitações <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<c:url value="#"/>">Licensa
Ambiental/Florestal</a></li>
<li><a href="<c:url value="#"/>">Declaração de
isenção de licensa</a></li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Relátorios <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<c:url value="#"/>">Lista de
Atividades/Sub-Atividades</a></li>
<li><a href="<c:url value="#"/>">Solicitações por
Empreendedor</a></li>
<li><a href="<c:url value="#"/>">Solicitações por
Empreendimento</a></li>
<li><a href="<c:url value="#"/>">Solicitações por
Atividade</a></li>
<li><a href="<c:url value="#"/>">Estatística por
Atividade</a></li>
<li><a href="<c:url value="#"/>">Relação dos
Usuarios</a></li>
<li><a href="<c:url value="#"/>">Relação de
Empreendedores e seus Empreendimentos</a></li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Ajuda <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Informações</li>
<li>Suporte</li>
</ul></li>
</ul>
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown"> Sistema <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="<c:url value="/usuario/alterarSenha"/>">Alterar
Senha</a></li>
</ul></li>
</ul>
<ul class="nav pull-right">
<li class="pull-right">Logout</li>
</ul>
</div>
</div>
</div>
</div>
Any help is appreciated. Thanks
You probably didn't update to the latest Bootstrap yet, did you?
I wrote a blog post including a temporary fix for this issue here:
http://forwebonly.com/fix-for-twitter-bootstrap-dropdown-on-ipad-and-iphone/
But when you update to the latest Bootstrap (version 2.2.2 or higher), this issue should be fixed, as you can read in their changelog.
Here's the rundown on what's new in this release:
...
Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.
Related
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?
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.
i want to create a dropdown menu with nested submenu so that when users over on a submenu it should display its dropdown list and when the mouse is taken out of the submenu it should hide its dropdown list. i have tried but it works only with on click() method but i want to use on hover(). here is my code
html
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<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="#"><img src="design/img/logo.png" alt="logo"></a>
<h6><small>Some text</small></h6>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="main-navigation">
<li class="">Accueil</li>
<li class="dropdown">
Groupe Cible <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1" href="#">Cible Etudes & Conseils <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1">Qui Sommes Nous <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li>Cible Etudes/Conseil</li>
<li>Notre Vision</li>
<li>Notre Mission</li>
<li>Nos Valeurs</li>
<li>Notre Force</li>
<li>Nos Filiales</li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" href="#" data-toggle="dropdown">Notre Offre </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Enquêtes et Sondage</a>
<ul class="dropdown-menu">
<li><a tabindex="0">procédures Qualité</a></li>
<li>Méthodes</li>
<li><a tabindex="0">outils de Collecte</a></li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Etudes</a>
<ul class="dropdown-menu">
<li class="test" class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Marketing</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Marché</a></li>
<li><a tabindex="0">Consommateurs</a></li>
<li><a tabindex="0">Stratégie Marketing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" class="test" href="<?=url::site('fr/a_propos/14/development')?>" tabindex="0" data-toggle="dropdown">Développement</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Impact environnemental</a></li>
<li><a tabindex="0">Développement Urbain et Local</a></li>
<li><a tabindex="0">Assainissement</a></li>
<li><a tabindex="0">Evaluation des projets et programmes</a></li>
</ul>
</li>
<li><a tabindex="0">Moyens Logistiques</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">Le Conseil</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Conseil en Marketing</a></li>
<li><a tabindex="0">Conseil en Gestion</a></li>
<li><a tabindex="0">Recherche de Financement</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">La Formation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Formation en Vente</a></li>
<li><a tabindex="0">Formation en Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu" >
<li>Cameroun</li>
<li>Afrique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
<!-- =========================== cible RH ============================== -->
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Cible RH Emploi</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Qui Sommes Nous </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Cible RH Emploi</a></li>
<li><a tabindex="0">Notre Vision</a></li>
<li><a tabindex="0">Notre Mission</a></li>
<li><a tabindex="0">Nos Valeurs</a></li>
<li><a tabindex="0">Notre Force</a></li>
<li><a tabindex="0">Nos Filiales</a></li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li >Notre Offre </li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Afique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" href="" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown <?=(!empty($service))?"active":""?>">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li class="dropdown <?=(!empty($client))?"active":""?>">
Clients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>MTN</li>
<li>Apple</li>
</ul>
</li>
<li class="dropdown <?=(!empty($equipe))?"active":""?>">
Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Mark</li>
<li>John</li>
</ul>
</li>
<li class="dropdown <?=(!empty($partenaire))?"active":""?>">
Partners <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Bootstrap</li>
<li>Ubuntu</li>
</ul>
</li>
<li class="dropdown <?=(!empty($actualite))?"active":""?>">
News <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Perl</li>
<li>Python</li>
</ul>
</li>
<li class="dropdown <?=(!empty($project))?"active":""?>">
Projects <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Java</li>
<li>Ajax</li>
</ul>
</li>
<li class="dropdown <?=(!empty($contact))?"active":""?>">
Contacts <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Contact Cible Etudes/Conseils</li>
<li>Contact Cible RH</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
then my jquery
$('a.test + ul').css("display","none");
$('.dropdown-submenu').css("position","relative");
$('.dropdown-submenu .dropdown-menu').css({"top": "0","left": "100%","margin-top": "-1px"});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
please help me! Thanks.
You can do this by simply using CSS like follows-
.dropdown-submenu:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
Working fiddle here
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>
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.