I'm creating a Twitter Bootstrap main nav and sub nav with a drop down menu on the main nav. The problem is that I can never get the drop down menu to be shown above the sub nav. Here is the HTML:
<div class="mainnav navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Settings
</a>
<ul class="dropdown-menu">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="subnav navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a>foo</a></li>
<li><a>bar</a></li>
</ul>
</div>
</div>
</div>
CSS:
.subnav {
top: 40px;
}
.mainnav .dropdown-menu {
// how can I show this menu above the subnav???
}
Never mind, figured this out myself.
.subnav {
top: 40px;
z-index: 1020; // make z-index smaller than .mainnav
}
JsFiddle Link:
http://jsfiddle.net/j2pCX/1/
Give z-index a try:
.subnav {
position: absolute;
top: 40px;
z-index: 10;
}
.mainnav .dropdown-menu {
position: absolute;
z-index: 20;
}
Related
I have a dynamic mega menu that shows the first tier of submenus but I'm trying to make it so that the second tier show up when an element in the 1st tier is hovered over. currently both tiers and showing up taking up a lot of space.
I found a post on here saying to use this layout:
.child{ display:none; }
.parent:hover .child{ display:block; }
It's kind of tricky with the css I have:
child = .new-menu .dropdown-submenu .dropdown-menu.burt
parent = .dropdown-menu.burt .new-menu .dropdown-submenu > a
I tried this but it's not working:
.new-menu .dropdown-submenu .dropdown-menu.burt{
display: none;
}
.dropdown-menu.burt .new-menu .dropdown-submenu > a:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
Targeting these specific elements seems tricky and the only way I could get them specifically was the mess I have above. Maybe I can target these elements a better way, or another way of making this work?
Update
Here is the html structure, it's kind trick, it's from Americommerce and it uses 'Merge Codes' that supply the dynamic data
This is the main structure:
<ul class="nav navbar-nav">
<ac:layoutarea id="Item">
<ac:visibilityarea id="phDDLink">
<li class="dropdown">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu mm2">
<div class="row"> $$SUBMENU$$</div>
</ul>
</ac:visibilityarea>
</li>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li>
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
</ul>
This is the structure of the sub-menus:
<ac:layoutarea id="SubItem">
<ac:visibilityarea id="phDDLink">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu">
$$TEXT$$
<ac:visibilityarea id="phSubMenu">
<ul class="dropdown-menu burt" id="">$$SUBMENU$$</ul>
</ac:visibilityarea>
</li>
</div>
</ac:visibilityarea>
<ac:visibilityarea id="phNoDDLink">
<li class="greg">
$$TEXT$$
</li>
</ac:visibilityarea>
</ac:layoutarea>
Update 2
HTML from inspector
<ul class="dropdown-menu mm2">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu"> Products
<ul class="dropdown-menu burt">
<li class="greg"> Product 1 </li>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
Update 3
I added a class to the first <a> and then added this css:
.new-menu .dropdown-submenu .dropdown-menu.burt {
display: none;
}
.sub-link:hover .new-menu .dropdown-submenu .dropdown-menu.burt {
display: block;
}
It hides the elements but showing them on hover still doesn't work
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
Your HTML structure is not clear so I tried to create my own and try to recreate your problem
have a look
.new-menu{
display: none;
}
.dropdown-submenu{
display: none;
}
.dropdown-menu{
display: none;
}
.mainParent:hover .new-menu{
display: block;
}
.mainParent:hover .dropdown-submenu{
display: block;
}
.mainParent:hover .dropdown-menu{
display: block;
}
<a class="mainParent">
Link
<div class="new-menu">
<div class="dropdown-submenu">
<div class="dropdown-menu burt">
Application Menu
</div>
</div>
</div>
</a>
If each element having a property to hide, then each element class have to make visible on parent element hover.
If you are facing some kind of nested DOM CSS problem, you can see this running code snippet
.sub-link{
display: block;
}
.new-menu{
display: none;
}
.greg
{
display: none;
}
.dropdown-submenu:hover a{
color: red !important;
}
.dropdown-submenu:hover .burt{
display: block;
color: red !important;
}
.dropdown-submenu:hover .new-menu{
display: block;
color: red !important;
}
.new-menu:hover .burt{
display: block;
}
.new-menu:hover .greg{
display: block;
}
.new-menu:hover a{
display: block;
color: black !important;
}
<li class="dropdown-submenu"> <a class="sub-link" href="/store/c/software.aspx" target="">Software</a>
<ul class="dropdown-menu burt">
<div class="new-menu">
<li class="dropdown-submenu">
<a href="/office-2019.aspx" target="">
Products
</a>
<ul class="dropdown-menu burt">
<li class="greg">
<a href="/product1.aspx" target="">Product 1
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
You can always add another class for your child elements and to your parent element.
<html>
<head>
<style>
.f-red {color:red;}
.childEl{
display:none;
}
#parentEl {padding: 5px; border-style: solid;}
#parentEl:hover > .childEl {display:block}
</style>
</head>
<body>
<div id="parentEl">
<h1 class="childEl f-red">Child</h1>
</div>
</body>
</html>
How do I center an unordered list that is divided with an image inside?
I want to achieve that the unordered list is one row, centered and also the image inside is centered so that the image divides the rest of the list in two halves (topnav-left and topnav-right).
My HTML:
<ul class="nav">
<div class="topnav-left">
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Women">Women</a>
</li>
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Men">Men</a>
</li>
<li class="">
Stores
</li>
<li class="">
Lifestyle
</li>
</div>
<div class="nile-logo" style="">
<li>
<img alt="Logo" src="http://img.logospectrum.com/dec/dummy-logo.jpg">
</li>
</div>
<div class="topnav-right">
<li class="">
<a class="toggle-account-nav" data-no-turbolink="true" href="/de/account">My Account</a>
</li>
<li>
<div class="cart">
<a href="/de/cart">
Warenkorb
</a> </div>
</li>
<li>
<a html="{:class=>"open-wishlist"}" href="/de/wishlist">WUNSCHLISTE</a>
</li>
<li class="language">
<a class="language" href="/en/pages/imprint">EN</a>
<a class="language" href="/fr/pages/imprint">FR</a>
</li>
</div>
</ul>
My CSS:
ul.nav { text-align: center; }
ul.nav li { display: inline-block; }
Here a codepen: demo
Try to use display:flex; add this to add this,
ul {display:flex;justify-content: space-around;list-style-type: none;}
ul.nav li { flex:1; text-align: center; } /* Edit from comment by Paulie_D
Working DEMO
You mean like this?:
http://codepen.io/anon/pen/pENYLZ
ul.nav li {
display: block;
}
Or like this?:
http://codepen.io/anon/pen/mAOoKN
ul.nav {
margin: 0 auto;
width: 200px;
position: relative;
}
ul.nav li {
display: block;
}
this code below works fine if I have 1 collapsable sidemenu item, but when I add another the upper item doesn't work right. It's all badly highlighted.
The bottom one works still fine. What's wrong here thanks. Here is bootply:
http://www.bootply.com/IABXgPMp5S
<div class="container body-content">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav">
<li>
Sector One
<ul class="nav collapse pull-right" id="sub1">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
<li>
Sector Two
<ul class="nav collapse pull-right" id="sub2">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
</div>
</div><!--/.row-->
</div><!--/.container-->
and css file:
body {
padding-top: 51px;
}
.text-center {
padding-top: 20px;
}
.col-xs-12 {
background-color: #fff;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 20px;
}
#sidebar .nav {
width: 95%;
}
#sidebar li {
border:0 #f2f2f2 solid;
border-bottom-width:1px;
}
/* collapsed sidebar styles */
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
padding-top:0;
}
}
You are not closing the first "ul" before starting the second one, so bootstrap thinks you have one big unordered list.
here is a link to the fix and here:
<div class="container body-content">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav">
<li>
Sector One <span class="glyphicon glyphicon-arrow-down pull-right"></span>
<ul class="nav collapse pull-right" id="sub1">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
<ul class="nav">
<li>
Sector Two <span class="glyphicon glyphicon-arrow-down pull-right"></span>
<ul class="nav collapse pull-right" id="sub2">
<li>List 1</li>
<li>List 2</li>
</ul>
</li>
</ul>
</div>
</div><!--/.row-->
</div><!--/.container-->
is the corrected html
I am creating a topmenu for a webpage, and with scripting, the sub menus pops up on hover. I have also taken measures to not let the menu grow too far to the right, by if needed let it grow in the other direction. This picture clarifies:
I do this by adding the class "to-the-left" to the sub sub menu.
Now, why is some menu items of the parent on top of my sub sub menu? You can read "Item 3" below "Sub sub item 2" which should not be possible.
I have tried to add z-index to the sub sub menu without succeeding.
http://jsfiddle.net/VK7Mt/
<!doctype html>
<html>
<head>
<style type="text/css">
div.top-menu
{
width: 920px;
margin: 0 auto;
}
div.top-menu ul.topmenu
{
margin: 0;
height: 41px;
background: #ccc;
padding: 0;
position: relative;
}
ul.topmenu li
{
list-style: none;
float: left;
padding: 12px 19px;
min-height: 17px;
position: relative;
}
ul.topmenu ul
{
width: 190px;
position: absolute;
top: 41px;
left: 0;
margin: 0;
padding: 0;
background: #dddddd;
border: #c4c4c4 1px solid;
}
ul.topmenu ul li
{
float: none;
padding: 3px 6px 3px 13px;
}
ul.topmenu a
{
color: #333;
text-decoration: none;
}
ul.topmenu ul li a
{
display: inline-block;
font-weight: normal;
width: 90%;
}
ul.topmenu ul li:hover
{
background: #3399cc;
}
ul.topmenu ul ul
{
left: 100%;
top: 0;
}
ul.topmenu div
{
cursor: pointer;
}
.topmenu-sub-item > .item
{
padding-left: 6px;
}
.topmenu-sub-item > .item > a
{
margin-top: 3px;
margin-bottom: 3px;
}
ul.topmenu ul ul.to-the-left
{
left: -100.5%;
}
</style>
</head>
<body>
<div class="top-menu">
<ul class="topmenu">
<li class="topmenu-root-node">
root item
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class="item">
item 1
</div>
</li>
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/item2">item 2</a>
</div>
<ul class="topmenu-submenu-container to-the-right">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
</div>
<ul class="topmenu-submenu-container to-the-right">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 2
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 3
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="topmenu-sub-item">
<div class="item">
Item 3
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="top-menu" style="margin-top: 170px">
<ul class="topmenu">
<li class="topmenu-root-node">
root item
<ul class="topmenu-submenu-container">
<li class="topmenu-sub-item">
<div class="item">
item 1
</div>
</li>
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/item2">item 2</a>
</div>
<ul class="topmenu-submenu-container to-the-right">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
</div>
<ul class="topmenu-submenu-container to-the-left">
<li class="topmenu-sub-item nonempty">
<div class="item has-submenu">
<a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 2
</div>
</li>
<li class="topmenu-sub-item">
<div class="item">
Sub sub item 3
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="topmenu-sub-item">
<div class="item">
Item 3
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
This is because the order of the elements matters: elements that come later in code, are on top of the previous elements.
In your case, the subsubs are a part of the main Item 2 >> are BELOW the afterwards following Item 3.
You can override this using z-index for the sub-menu (not the subsub):
ul.topmenu ul {
...
position:absolute;
z-index:999;
...
}
updated fiddle: http://jsfiddle.net/VK7Mt/3/
Add z-index to:
ul.topmenu ul ul.to-the-left {
z-index: 100;
}
That way you are saying that you want that ul to be in front of other elements. It had position absolute so it needed some z-index.
JSFIDDLE
I have designed a bootstrap navbar with dropdown menu
http://jsfiddle.net/yabasha/fex8N/3/
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
}
Is there a way to change the default alignment for the dropdown-menu (from left to center / right) so the arrow would display in center / right?
It's better to avoid the use of px for positioning, since the dropdown´s width may change. This would be more appropriate for centering the caret:
.navbar .nav > li > .dropdown-menu.pull-center:after {
left: 50%;
margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
left: 50%;
margin-left: -7px;
}
For right alignment, you just need to add the class pull-right to the dropdown:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<!-- your menu -->
</ul>
</li>
JSfiddle with your example http://jsfiddle.net/shail/fex8N/5/
change the following code to your liking to center the drop down caret :
.navbar .nav > li > .dropdown-menu:after {
left: 83px; /change to your liking/
}
.navbar .nav > li > .dropdown-menu:before {
left: 83px; /keep values in after and before same /
}
To align the li elements to the right side :
.dropdown-menu > li > a {
text-align:right;
}
To align the li elements to the center :
.dropdown-menu > li > a {
text-align:center;
}
I have implemented this in my project and have answered in below link.
https://stackoverflow.com/a/21849528/2026261.
<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;">
<ul class="dropdown-menu" role="menu">
<li>Write Post</li>
<li>Posts List</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label>
<span class="caret" data-toggle="dropdown"></span>
</div>
In this way you can align menu to left or right according to your choice.