I have a drop down menu with bootstrap, here is a fiddle:
http://jsfiddle.net/ajfbqfej/
<nav id="navvy" class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex8-collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Capabilities</a>
<ul class="dropdown-menu">
<li>Precision Machining</li>
<li>CNC Turning</li>
<li>Swiss Screw Machining</li>
<li>Medical Machining</li>
<li>CNC Milling</li>
<li>Secondary Operations</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Products</a>
<ul class="dropdown-menu">
<li>Miniature Parts</li>
<li>Nozzles</li>
<li>Bike Chain Link</li>
<li>Shafts</li>
<li>Fasteners & Screws</li>
<li>Brackets, Plates & Mounts</li>
<li>Valves</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="#">Material Specialties</a>
<ul class="dropdown-menu">
<li>Stainless Steel</li>
<li>Plastic</li>
<li>Aluminum</li>
<li>Steel</li>
<li>Brass</li>
<li>Hastelloy</li>
<li>Monel </li>
<li>Titanium</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/About">About</a>
<ul class="dropdown-menu">
<li>Quality Assurance</li>
<li>Equipment</li>
<li>Industries Served</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Gallery">Gallery</a>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources">Resources</a>
<ul class="dropdown-menu">
<li>Latest News</li>
</ul>
</li>
<li class=" dropdown">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Contact-Us">Contact Us</a>
<ul class="dropdown-menu">
<li>Careers</li>
<li>RFQ</li>
</ul>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Glossary">Glossary</a>
</li>
<li class=" ">
<a data-toggle="dropdown" data-hover="dropdown" href="http://www.forstertool.com/Resources/Forster-Blog">Blog</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
The top level items are not clickable, can anyone see what I might be doing wrong? Otherwise it works great.
Thanks!
OK - for me I just had to remove the data-toggle attribute from my anchors... weird!
Related
This is a part of code from my nav bar. I am trying to create a dropdown menu, but unfortunately on mobile when i click the toggle instead of showing dropdown it closed . I have tried to update all the stylesheet bootstrap code , and link . i have tried other models on navbar dropdown but the same thing
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="assets/images/mindnmovelogo.png" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button>
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul id="nav" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="page-scroll" href="#home">INDUSTRIES</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="#about">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="page-scroll nav-link " href="#" id="navbarDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i>WHAT WE DO</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</li>
<li class="nav-item">
<a class="page-scroll" href="#footer">GET IN TOUCH</a>
</li>
</ul>
</div> <!-- navbar collapse -->
<div class="navbar-btn d-none d-sm-inline-block">
<a class="main-btn" data-scroll-nav="0" href="mailto:">GET A FREE QUOTE</a>
</div>
</nav> <!-- navbar -->
In bootstrap, with the below code i am able to expand and collapse the 2 menus. But when i expands a menu and click on the sub menu, then the sub menus are not staying collapse..
When i changed this line from class="collapse list-unstyled " to class="collapse list-unstyled show" the menus are collapsed and not shrinking when i click on the next main menu...
<?php include('header.php'); ?>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components top_admin">
</ul>
<ul class="list-unstyled components">
<li>
<a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
<i class="fa fa-tachometer" aria-hidden="true"></i>
<span>DASHBOARD </span>
</a>
</li>
<li>
<a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes1</span>
</a>
<ul class="collapse list-unstyled " id="my_note1">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
</ul>
</li>
<li>
<a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes2</span>
</a>
<ul class="collapse list-unstyled " id="my_note2">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
<li>
<span class="small_menu">SN</span>
<a class="la_cls" href="#">Search Notes</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
I need after clicking the sub menu the sub menus should me stayed collapsed util i click on the another main menu. Anyone please help me, what should i do to solve this problem. Thanks in advance..
<header role="banner" id="top" class="navbar navbar-static-top">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">M-Panel</div>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Click Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Live Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> News Reports</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> View Accounts</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Add Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span></span>
<small>Welcome,</small> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
</div>
Hi i want to change the active tab with jquery
this is my code
so what is the solution please
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
<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 visible-xs" href="index.html">Titel</a>
</div>
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul id="collapsablenav" class="nav navbar-nav navbar-right">
<li class="active dropdown hidden-xs">
<a data-toggle="dropdown" href="#" class="dropdown-toggle"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="CDCDC">
<a data-toggle="tab" href="#ABAB"></a>
</li>
<li class="divider"></li>
<li class="active" id="testclocalisation"><a data-toggle="tab" href="#hometab">AZ</a></li>
</ul>
</li>
<li class="active visible-xs"><a data-toggle="tab" href="#FFFF">F</a></li>
<li id="testFFFFFF"><a data-toggle="tab" href="#DDDDD">D</a></li>
<li id="testCCCCCC"><a data-toggle="tab" href="#CCCCCC">C</a></li>
<li id="testBBBBB"><a data-toggle="tab" href="#BBBBB">B</a></li>
<li id="testAAAAAA"><a data-toggle="tab" href="#AAAAA">A</a></li>
</ul>
</div>
</div>
</nav>
so what is the solution please
function changeTab( newID ) {
$('.navbar li').removeClass('active');
$('#' + newID ).addClass('active');
}
Now call this function on some event and pass the Id of the li you want to make active.
How would I go about getting the social media buttons to align next to each other -- that is, horizontally rather than vertically -- in the mobile mode on the drop down menu?
The icons are within a standard bootstrap nav bar, aligned to the right side of the bar.
Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.
Here is my code for the menu div.
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="index.html">Welcome </a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Broadmark Partners</li>
<li>Blog</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<h3 class="text-muted"> </h3>
<p> </p>
</div>
you just need to apply the nav-pills-class to the list like so.
<ul class="nav navbar-nav navbar-right nav-pills">
see your sample working here: http://www.bootply.com/pm5SsVZrOi
When I am resizing the browser screen to mobile size, desktop menu replaced by dropdown with multiple options:
But how to change that dropdown to menu with button like that:
By clicking the "Menu" button menu showing and hiding
In order to get menu like above we have to follow this markup
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
DEMO