I have a top bar navigation and need a single item and its dropdown to have a different background colour from the rest. I have managed to change the background colour of the item but cannot change its dropdown. I have figured out how to change the drop menus for all items and I have tried all different variations to get this to work with the single item but nothing works.
Can anyone help?
Just to clarify, I am trying to select the dropdown on the right hand side with the id of account and class of top-bar-colour. Thanks
NB: I am using foundation 5. I originally had that info in the title but someone deleted it, not sure why :/
.top-bar-section .top-bar-colour {background-color:red} //this works
.top-bar-section .dropdown li a {background-color:red} //this doesn't as it changes all dropdowns
.top-bar-section li a.top-bar-colour .dropdown li a { background-color:red} //this doesn't work either
<nav class="top-bar" data-topbar >
<ul class="title-area">
<!-- Title Area -->
<li class="name"> </li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- main nav section -->
<ul class="left">
<li><i class="fi-home medium"></i></li>
<li class="has-dropdown">
menu
<ul class="dropdown">
<li>Dropdown Level 1</li>
<li>Dropdown Option</li>
<li>Dropdown Option</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown" id="account">
<i class="fi-torso medium"></i>
<ul class="dropdown"><li>Login</li></ul>
</li>
</ul>
</section>
</nav>
Assuming you want to change the color of the bar and drop down of the first one you can use this css
.top-bar-section .left .dropdown li a {background-color:red}
Let me know if my assumption is right
Related
I did change Bootstrap 3 drop-down behavior from on click to on hover by adding some CSS
.dropdown:hover .dropdown-menu {
display: block;
}
It's working. The sub-menu has more than 2 <li> tags and when hovering below the 2nd <li> the sub-menu will disappear.
<li class="dropdown">
Exhibitor <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Opportunities</li>
<li>Exhibitor List</li>
<li>Market Information</li>
<li>Floor Plan</li>
<li>Pricing</li>
</ul>
</li>
I can hover until <li>Exhibitor List</li> only.
When I reach <li>Market Information</li> the sub-menu disappears.
The problem is this element:
<body>
[…]
<section style="position: absolute;left: 0;right: 0;top: 100px;z-index:4000;">[…]</section>
</body>
It is an invisible stripe above the menu at around the third element. As it has a higher z-index you'll leave the menu when hovering this element.
PS: It's the container that holds the links Exhibitor list, Floor plan and Opportunities.
I want to put the menu-icon on the left hand side of the nav bar when it goes into mobile. For the life of me, I can't find any documentation how to do this. If tried putting the code in different place and using floats with custom CSS but can't get it to budge, is it possible?
Here is my code:
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left">
<li class="active">Home</li>
<li class="divider"></li>
<li class="active">Archives</li>
<li class="divider"></li>
<li class="active">Contact Us</li>
</ul>
</section>
add this to your css
.top-bar .toggle-topbar{
left:0px
}
Default css has right:0px
I added a simple <nav class="top-bar"> element to my page. It's displaying properly on computers, but on the iPhone I just get a solid black bar with no menu items. This is the top part of my nav.
<nav class="top-bar" style="">
<ul class="title-area">
<li class="name"></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown not-click">Orders
<ul class="dropdown"><li class="title back js-generated"><h5>« Back</h5></li>
<li class="">Create New</li>
</ul>
</li>
</ul>
</section>
</nav>
Just remove the height in your CSS:
.top-bar .name {
height: 45px;
}
Specifying a height was causing the <li> to render below <nav>, and since overflow:hidden was set, the <li> was not being displayed.
Can someone help me. I have this html code and i want to design my submenus with css, but i am new in this and i really need a help
<div class="nav-collapse collapse">
<ul id="nav-list" class="nav pull-right">
<li>Home</li>
<li>About</li>
<li>Updates</li>
<li>Screenshots</li>
<li>How to</li>
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
<li>Permissions</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
I want to have dropdown list for my submenus.My menu is horizontal at the moment
To get you started...
.nav li ul { display: none; }
.nav li:hover ul { display: block;}
Your HTML needs a minor edit also... You need to nest the sub-menu <ul> inside the parent <li>. Like below:
<li>How to
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
</li>
Here is a jsfiddle demonstrating this working, obviously it is not horizontal as I lack the styles you already made, the functionality still works however when you hover the mouse over "How To":
http://jsfiddle.net/Zuvdf/
I'm using the dropdown from
http://www.lwis.net/free-css-drop-down-menu/
My menu has Home|About|Register|Login
I would like the menu to look like
Home|About|Register|Login<-----------------stretch till end ----------------->
What i'm doing now is create an extra li and add " " to it. The code is as below
<div id="mymenu">
<ul class="dropdown dropdown-horizontal">
<li class="first">Home</li>
<li>About</li>
<li>Register</li>
<li>Login</li>
<li class="last"><span> </span></li>
</ul>
</div>
Is there a better way to do this?
Also how do i highlight choosen menu item like for example if i click home the menu home should be highlighted.