I'm using Bootstrap to make drop down menus. One of the options I would like to have is two links on the same horizontal row in a dropdown menu. How would I achieve this?
<div class = "navbar">
<div class = "navbar-inner">
<li class = "dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button
<b class="caret"></b>
</a>
<ul class = "dropdown-menu" role="menu" >
<li>On First Row</li>
<li>On Second Row</li>
<li>On Third RowAlso On Third Row</li>
</ul>
</li>
</div>
</div>
Your solved Code is here >>>>> two links in one dropdown list item
html
<div class="navbar">
<div class="navbar-inner">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>On First Row
</li>
<li>On Second Row
</li>
<li class="hz">On Third RowAlso On Third Row
</li>
</ul>
</li>
</div>
</div>
css
.open> ul>li.hz{
display: inline-flex !important;
}
There is a problem with eirenaios answer:
When the dropdown is contained within a collapsible navbar, multiple <li> will be shown on one line (until it wraps to the next line) when the navbar is collapsed. This looks very ugly and confusing.
Here is the solution, based on eirenaios answer, but works also for toggled (collapsible) navbars with dropdowns:
https://plnkr.co/edit/JnsvKGiBokrI1frxC11P?p=preview
EDIT:
Additional CSS rule:
.open > .dropdown-menu {
display: table-caption;
}
HTML (mostly the same as the original, but surrounded by .navbar-collapse and added .navbar-header with a hamburger menu button to open the collapsed menu):
<nav class="navbar navbar-default">
<div class="navbar-header" data-toggle="collapse" data-target="#navbar0">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- toggled content -->
<div class="collapse navbar-collapse" id="navbar0">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown Menu A <span class="caret"></span>
<ul class="dropdown-menu">
<li class="hz">
Item A1 left
Item A1 right
</li>
<li class="hz">
Item A2 left
Item A2 right
</li>
<li>
Single item A3
</li>
<li class="hz">
Item A3 left
Item A3 right
</li>
</ul>
</li>
</ul>
</div>
</nav>
Related
When you view the page as mobile the main navigation bar does not show the drop downs properly underneath their respected parent link. I have search and cannot seem to find a solution. Currently the dropdown menus show under and to the left of the main link. You can see a live demonstration at http://beta.lofbc.org
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" 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>
<a class="navbar-brand hidden-lg hidden-md hidden-sm" href="#">Life of Faith Bible Church</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav nav-justified">
<li>#Html.ActionLink("HOME", "index", "Home")</li>
<li role="presentation" class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Church Services", "ChurchServices", "About")</li>
<li>#Html.ActionLink("What to Expect", "WhatToExpect", "About")</li>
<li>#Html.ActionLink("What we Believe", "whatwebelieve", "About")</li>
<li>#Html.ActionLink("Leadership", "Leadership", "About")</li>
</ul>
</li>
<li role="presentation" class="dropdown">
MINISTRIES <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Children", "Children", "Ministries")</li>
<li>FAA</li>
<li>God's Girlz Club</li>
<li>AfterShock Youth</li>
<li>Young Adults</li>
<li>Men of Impact</li>
<li>Women</li>
<li>God's Golden Girls</li>
<li>The Great Giveaway</li>
</ul>
</li>
<li>#Html.ActionLink("EVENTS", "", "Events")</li>
<li role="presentation" class="dropdown">
MEDIA <span class="caret"></span>
<ul class="dropdown-menu">
<li>Live Stream</li>
<li>#Html.ActionLink("Service Archives", "ServiceArchives", "Media")</li>
<li>TV Broadcast</li>
<li>Photo Album</li>
</ul>
</li>
<li>STORE</li>
<li role="presentation" class="dropdown">
CONTACT <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Send us a Message", "index", "contactus") </li>
<li>Submit Testimony</li>
<li>Prayer Request</li>
<li>#Html.ActionLink("Give", "Donate", "Giving")</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This is happening because your nested <ul> tags are absolutely positioned. An absolutely positioned element cannot move relatively positioned elements so even if you moved it across it will simply appear on top of your existing buttons.
My fix would be to apply the following css to the nested <ul> tags:
#media (max-width: 767px) {
.nav-justified>.dropdown .dropdown-menu {
position: relative;
width: 100%;
background-color: #1c5168;
}
.nav-justified>.dropdown .dropdown-menu li {
color: lightblue;
text-align: center;
}
}
Placing it inside a media query will stop the css from applying to your menu on desktop layouts.
You will still have to add more styling to get the menu to look nice but this will fix your positioning issue.
Just for reference here is a good article about the position property with examples of how it works: https://css-tricks.com/almanac/properties/p/position/
I have the following bootstrap menu, the last item in this menu is "More" which is a dropdown contains the left items from that menu, the problem is when user minimize the window the last items start hiding include "More" item.
So my question is: how to avoid the last item ("More") from being hide?
I searched the internet I could not find any solution, I found many are talking about pull left but it did not work for me.
Here is my code:
<div class="collapse navbar-collapse " id="category-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li >
a
</li>
<li >
b
</li>
<li >
c
</li>
<li >
d
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown">
More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
Any suggestion please?
Feel free to ask for more information.
I'd check the styles over - could be some class name with a breakpoint for display:none on that class. Have a look in Devtools and see what it's throwing out?
As far as your code goes, it looks fine so just check over the CSS, positioning and display, etc.
<div class="collapse navbar-collapse" id="category-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
What is the best way to toggle display of my second level dropdown menu when hovering over "a"...not when hovering over the full "li"?
I use bootstrap and fiddle is : http://jsfiddle.net/2Smgv/3100/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
I did not understand your question originally, and have updated my "answer" as such:
It is not possible to complete the modification you are requesting because the hover would be broken. The display of and ability to mouse over sublist items functions because those items are within the parent list. If you change the hover to the anchor tag, once you attempt to use the links within the subnav you will be outside of the anchor tag and thus removing the hover effect.
If you look at your markup, the "2-level Dropdown" also contains the and the with class .sub-menu. Thus hovering over the sub-menu is also over the parent (2-level Dropdown).
However, the containing "2-level Dropdown" ends with that text and the moving your cursor over the sibling sub-menu means you are no longer hovering over the .
I hope this explains why it is not possible and allows you to gain an understanding of the reasons why.
So I have a dropdown that works and scales down perfectly fine thanks to Bootstrap.
The client however wants the collapse to act like an accordion.
I'm trying to get to something like this. Avada's main nav menu-scaled down into mobile: Note how the 'Home Samples' header goes missing and becomes a toggle with the list items as its dropdown. How could I find out what was used to create this?A push in the right direction would be appreciated.
This is a fiddle of what i got.
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="header1"> Apparel
<ul class="dropdown-menu mega-dropdown-menu row mega-dropdown-menu-1">
<div class="dropimg"><img class="img-responsive" src="images/dropdown.jpg"> </div>
<li class="col-sm-2">
<ul>
<li class="dropdown-header">APPAREL</li>
<li class="dropdown-header_a">ALL PRODUCTS
<ul class="dropdown-menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">BRANDS</li>
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CATEGORY</li>
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
<li class="col-sm-2">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">CLEARANCE</li>
</ul>
</li>
<li class="col-sm-1">
<ul>
<li class="dropdown-header"> </li>
<li class="dropdown-header_a">SPECIALS</li>
</ul>
</li>
</ul>
</li>
</ul>
In the fiddle. the first in the dropdown, i've tried to make it a dropdown like normal. Is there a way to make it work without the use of java?
[EDITED]
With a little research and patience, I managed to add a slightly similar accordion-like transition effect to the bootstrap dropdown. I also managed to fix a visual bug that happened when the dropdown slided up too fast.
With bootstrap 3, they exposed quite a few javascript events for us to tinker with. The events that we will use are: 'show.bs.dropdown' and 'hide.bs.dropdown'. Learn more about their javascript events. Or check out the Dropdown events.
Inside each event, we will add a few jquery lines to give the dropdown our desired effect. The jquery events are: slideDown and slideUp.
All there is left for you is to overwrite bootstrap's default navbar color and add your own styles to it.
Here is the result (Click the phone icon on the far right): Bootply example
Javascript/Jquery:
$(function(){
//Add OnResize event
window.onresize = myResize;
myResize();
});
//This finction will fire each time the browser is resized
function myResize(){
//Get browser/device height and width
var bWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var bHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//If viewport is lower than ipad, hence mobile
if(bWidth < 768){
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
//On Complete, we reset all active dropdown classes and attributes
//This fixes the visual bug associated with the open class being removed too fast
$('.dropdown').removeClass('open');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
});
});
}
}
HTML/Bootstrap navbar:
<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="navbar-toggle collapsed" 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>
<a class="navbar-brand" href="#">Brand</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="dropdown">
APPAREL <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Bottoms</li>
<li>Formal Wear</li>
<li>Golfers</li>
<li>Jackets</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Sweaters</li>
<li>Tracksuits</li>
<li>T-Shirts</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
BRANDS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Altitude</li>
<li>Birdi</li>
<li>Chefworks</li>
<li>Drimac</li>
<li>Flexfit</li>
<li>Lexor</li>
<li>SA Rugby</li>
<li>Underarmour</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
CATEGORY <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Activewear</li>
<li>Hospitality</li>
<li>Locally Produced</li>
<li>Outdoor</li>
<li>Supporters</li>
<li>Team Wear</li>
<li>Workplace</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>CLEARANCE</li>
<li>SPECIALS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have searched high and low for this, on SO too but didn't find the "correct" answer.
Just figured it out myself.. Thought to share this, hope it helps someone..
Problem with BS3 is that it's Mobile first, which is a good thing, usually.. It's just that I need a few "default" options in the navbar regardless of the collapse state. Just like BS2.
So how can we do this?
One thing is obvious looking at the html code, the .navbar-header stays where it is, it doesn't collapse. Another thing, the magic collapse button has some way of hiding itself, probably CSS but hey, the idea is to abstract this layer so we don't have to worry about it..
But we can take advantage of this, let's place the links I want to show in there, they won't collapse.
What you will see is that your list items will end up vertically, that's not what you want.. So why does it do that?
Well.. If you use Firebug or some other development inspector, you will find that these items have been set to display : block;, that is making them the width of the screen pushing each next item down.
We need to change that behaviour. So let's add a new class to the ul that we can define in our custom CSS. I named it no-collapse but you can name it whatever you want..
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" class="navbar-toggle">
<span class="sr-only">Hamburger menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- THIS IS WHERE THE MAGIC HAPPENS! -->
<ul class="nav navbar-nav no-collapse">
<li>Apple
</li>
<li>Banana
</li>
</ul>
</div>
<!-- THE STUFF IN THIS DIV WILL COLLAPSE.. -->
<div id="bs-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">More Fruits <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Citrus</li>
<li>
Lemon
</li>
<li>
Orange
</li>
<li class="divider"></li>
<li class="dropdown-header">
Also a fruit
</li>
<li>
Tomato
</li>
</ul>
</li>
<li class="dropdown">Veggies <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Green stuff</li>
<li>
Spinache
</li>
<li>
Lettuce
</li>
<li class="divider"></li>
<li class="dropdown-header">Other stuff</li>
<li>Carrot
</li>
<li>Romenesko broccoli
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
This works
</li>
</ul>
</div>
</div>
</nav>
You'll need a modification, add a CSS (or LESS/SASS) after the bootstrap style sheets.
Add this CSS:
.no-collapse li, .no-collapse li a
{
text-align : center;
float : none;
display : inline-block;
}
Now in Bootply it would look like this: http://www.bootply.com/render/133885 source here:http://www.bootply.com/133885
Now we can have the healthy Apple and Banana on the screen on our mobile devices without resorting to the hamburger menu!