I add a new class to ul and try to style it with margin: 0 auto and text-align: center but doesn't work..
<section class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Venue</li>
<li>Schedule</li>
<li class="dropdown">
Artists <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>All Artists</li>
<li class="divider"></li>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Register</li>
</ul>
</section>
Here's the fiddle with center bootstrap nav items...
jsfiddle
You just need to add following css.
.navbar {
text-align:center;
}
Like this
demo
css
.nav{
background-color:red;
width:300px;
margin:0 auto;
text-align:center;
}
.nav ul {
list-style-type:none;
}
.nav ul li{
}
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>
Okay so here's the deal I made this navigation bar, thanks to a tutorial online, with the code below, everything works BUT the drop down menu, I hover over and nothing happens I've been slaving over this for hours! Thank you very much in advance for anyone's help! I know I'm close to getting it right but I just can't figure it out! Again thank you in advance for your help.
<style>
header { font-family: 'blades_gf_freeregular', Futura, Arial, sans-serif; }
nav { height: 41px; background: linear-gradient( #1e7995, #1c2c3f); }
nav ul { margin: 0; }
nav, ul.submenu { background: linear-gradient( #1e7995, #1c2c3f); border-radius: 5px; padding: 0; }
nav ul li { display: block; width: 150px; text-align: center; float: left; margin: 0; padding: 0; }
nav li:hover { background: rgba(0,0,0,0.4); }
nav a { color:#fff; text-decoration: none; display: block; padding: 10px; }
nav ul.submenu { background: rgba(0,0,0,0.8); position: relative; boredr-radius: 0 0 5px 5px; height: 0px; overflow: hidden; }
nav ul.submenu li { float: none; text-align: left; border-bottom: 1px solid rbga(0,0,0,0.3); }
nav ul li { transition: .3s all linear; }
nav ul li:hover ul.submenu { height: 126px; }
</style>
<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">
<ul role="menubar">
<li role="menuitem" tabindex="0">Home</li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials</li>
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul>
<li role="menuitem" tabindex="0">Films</li>
</ul>
</nav>
</header>
You need to move sub menu ul inside the menu li
<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">
<ul role="menubar">
<li role="menuitem" tabindex="0">Home</li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul>
</li>
<li role="menuitem" tabindex="0">Films</li>
</ul>
</nav>
</header>
DEMO
You have prematurely closed the parent <li> element that the submenu should belong to.
http://jsfiddle.net/GL87s/
<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">
<ul role="menubar">
<li role="menuitem" tabindex="0">Home</li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul></li>
<li role="menuitem" tabindex="0">Films</li>
</ul>
</nav>
</header>
Fixes it.
The only children a <ul> should have is <li>s. Not another <ul>.
You're really close. Judging by your CSS, the ul.submenu should be inside the <li> it belongs to. Just move it inside the <li>. Here's a jsfiddle with the change:
http://jsfiddle.net/8WGKU/
Keep submenu inside <li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul>
</li>
Fiddle here.
My Drop Down Menu is Not WORKING! it works on Jsfiddle but not in real life...lol. I'm very new to all fo this. I hope this isn't a stupid question. I tried to find solutions but have not seen one that works the way I want this to.
<!DOCTYPE html>
<html>
<head>
<title>Home - Joe </title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<ul id="nav">
<li> Home </li> <!-- menu-->
<li> Music </li>
<ul class="dropdown">
<li>Albums</li> <!-- drop down list-->
<li>Downloads</li>
<li>Videos </li>
</ul>
<li> Portfolio </li>
<ul class="dropdown">
<li>Photography</li>
<li>Designs</li>
<li>Webpages </li>
</ul>
<li> About </li>
<ul class="dropdown">
<li>Biography</li>
<li>Interests</li>
<li>Goals </li>
</ul>
<li> Contact </li>
</ul>
</div>
<div id="ContentLeft">
</div>
<div id="ContentBottom">
</div>
</body>
</html>
CSS:
body {
color: #666;
text-align: left;
margin: 0px;
font-family: Roboto;
font-weight: lighter;
}
#header {
width:100%;
height:20px;
background:#333;
border-bottom:1px solid #000;
padding: 5px 5px 5px 0px;
}
.dropdown{
display:none;
list-style-type:none;
background:#333;
}
#nav {
list-style-type: none;
margin-top: 0px;
margin-left:-30px;
background:#333;
float:left;
}
#nav li {
padding:0px 10px 0px 10px;
float:left;
}
#nav li a {
color: #666;
text-decoration: none;
}
#nav li a:hover {
color: #CCC;
}
#nav li:hover ul{
display:block;
position: absolute;
margin: 0px 0px 0px -10px;
padding:0;
text-align: left;
}
#nav li:hover li{
float:none;
background:#333;
}
#nav li a:active {
color: #FFF;
}
http://jsfiddle.net/WwuRK/ <--- I want it to work Like this.
You need to wrap <ul> in the <li>. In your current example, you are doing the following:
<body>
<div id="header">
<ul id="nav">
<li> Home </li> <!-- menu-->
<li> Music </li>
^----------- remove
<ul class="dropdown">
<li>Albums</li> <!-- drop down list-->
<li>Downloads</li>
<li>Videos </li>
</ul>
</li> <-------- add removed </li> here
<li> Portfolio </li>
^----------- remove
Remove the tags and add them after the ul.dropdown.
Here is a demo of your current code (DOES NOT WORK):
http://jsfiddle.net/dirtyd77/WwuRK/4/
Here is an updated version of your code:
<div id="header">
<ul id="nav">
<li> Home </li> <!-- menu-->
<li> Music
<ul class="dropdown">
<li>Albums</li> <!-- drop down list-->
<li>Downloads</li>
<li>Videos </li>
</ul>
</li>
<li> Portfolio </li>
<ul class="dropdown">
<li>Photography</li>
<li>Designs</li>
<li>Webpages </li>
</ul>
<li> About
<ul class="dropdown">
<li>Biography</li>
<li>Interests</li>
<li>Goals </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="ContentLeft"></div>
<div id="ContentBottom"></div>
Working demo of the edited code: http://jsfiddle.net/dirtyd77/WwuRK/6/
Hope this helps and let me know if you have any questions.
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.
Hello newbie question, I'll just wanted to hover the li.about on the ul.second.. Can someone help me on this one..
<ul id="nav" class="clear">
<li id="home"></li>
<li id="about"></li>
<ul class="second">
<li><a href="www.yahoo.com">1st Link</li>
<li><a href="www.google.com">2nd Link</li>
<li><a href="www.google.com">2nd Link</li>
</ul>
<li id="gallery"></li>
<li id="before-after"></li>
<li id="loft"></li>
<li id="case"></li>
<li id="testimonials"></li>
<li id="faqs"></li>
<li id="contact"></li>
</ul>
css codes
#navigation ul#nav li#about:hover ul.second
{
background:#CCC;
padding:1px;
margin:1px;
height:200px;
color:black;
z-index:1000;
width:200px;
}
If its a drop down menu you're trying to do, then make use of the display: none; and display: block css properties.