I am working on a pretty simple menu with just one level of submenu items.
I have managed to get the styling as I want it, only that once the parent item is selceted (it displays a background image)te submenu items then also display that background image, which shouldn;t happen.
Here is my css
#fav-nav .navigation li a:hover,
#fav-nav .navigation li.active a{
color: #fff;
background: url(../../../images/menu-back.png) no-repeat top;
}
#fav-nav .nav-child li a:hover,
#fav-nav .nav-child li a:active {
background-image: none;
color: #fff;
}
Here is the html, sorry it's out of a joomla site, I hope I got all the relevant info here.:
<div class="navigation">
<div class="moduletable">
<ul class="nav menu">
<li class="item-102 deeper parent">FENCING
<ul class="nav-child unstyled small">
<li class="item-106">Fence Panels</li>
<li class="item-107">Fence Posts</li>
<li class="item-108">Gates</li>
<li class="item-109">Gate Furniture</li></ul></li>
<li class="item-103 current active">
TIMBER</li></ul>
</div>
</div>
</div>
Any help would be really appreciated.
Thanks
Make the following changes in your css
#fav-nav .nav-child li > a:hover,
#fav-nav .nav-child li > a:active {
background-image: none;
color: #fff;
}
Related
New to Bootstrap and creating a basic navigation bar. I am hoping that what I need makes sense. Put simply, I need the background color and text color of list items in the dropdown-menu to match both before and after they collapse. I cannot seem to find the right CSS attributes to edit, and the many combinations that I have tried do not solve my problem. A similar question did not solve my problem, but perhaps it is worth looking at for others.
Below is what the menu looks like before it collapses. Each <li> has a link, or <a>, within it (see basic HTML below). The text color is black, and the background color is white. When the item is hovered over, the background of <li> turns tan. I want the same colors after the menu collapses:
After collapse it appears like this:
The colors seem to change back to Bootstrap's defaults after collapsing. I would like the text for Sub 1 and Sub 3 to be black by default with a white background, while keeping the color behind the header, Stuff 2, the same. The colors seem to work fine when clicked or hovered over (tan background with black font).
Below is some of the relevant HTML and CSS. I know that some of it is messy (and that the use of !important; is often considered poor form), but I hope someone out there can help me identify the block of code so I can get it working and then focus on cleaning it up.
Basic HTML:
<nav class="navbar navbar-inverse">
<div id="navbarbg" class="container-fluid">
<div id="rbgnavbar" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="logo" class="pull-left" href="http://www.redbuttegarden.org"><img src="images/logo.png" alt="Red Butte Garden"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 1 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 2 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="rbgwhitelink">STUFF 3 <span class="caret"></span></span></a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
Basic CSS:
#rbgnavbar a:hover, a, li, .dropdown-menu li:hover {
color: #000000;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
color: #000000;
}
/* Main dropdown menu items change cover when selected/clicked */
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
.dropdown-menu li, .dropdown-menu a {
text-align: center;
color: #000000;
}
.dropdown {
font-size: 10px;
padding: 0;
font-weight: bold;
}
#rbgnavbar {
max-width: 1400px;
margin-left:auto;
margin-right:auto;
background-color:#00502F;
}
.rbgwhitelink {
color: #FFFFFF;
}
.dropdown ul {
padding-top: 0px;
padding-bottom: 0px;
font-size: 10px;
font-weight: bold;
}
/* Border thickness and color between dropdown menu li, padding */
.dropdown-menu li {
border-top: 2px double #D3D3D3;
padding-top: 5px;
padding-bottom: 5px;
}
/* Background color of li in navbar when hovered over */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li:hover {
background-color: #F2EDE4;
}
/* Makes dropdown-menu li links bold*/
.dropdown-menu li > a, .dropdown-menu li > a:visited {
font-weight: bold;
}
I suggest to use media queries and add the classes you want to tweak.
For example:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.dropdown-menu>li>a {
background-color: #fff;
}
}
For Bootstrap 3 default media queries you may found it here
After some experimenting, this did it:
.dropdown-menu li {
background-color: #FFFFFF;
}
.dropdown-menu li:hover {
background-color: #F2EDE4;
}
.dropdown-menu li > a:hover {
text-decoration: none;
}
/* Changes the color of link text <a> after navbar has collapsed for small screen or mobile mode */
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:visited {
color: #000000;
}
I think you have to change this color:
.dropdown-toggle:active, .open .dropdown-toggle, .dropdown:hover {
background-color: #196143 !important;
}
I'm not sure why my CSS is not hitting my HTML and styling it correctly.
HTML:
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 2.0.0 </li>
<li class="divider"></li>
<li>Page 2.0.1 </li>
<li class="divider"></li>
<li>Page 2.0.2 </li>
</ul>
</li>
CSS:
.dropdown-menu li:hover{
background-color: green;
}
The class dropdown-menu should be hit and then when you hover over the li's inside it. I have tried adding an id as dropdown menu and changing the CSS to #dropdown-menu but it made no difference.
Also, is there an easy way to find out exactly how to hit the appropriate element as I find this is a frequent problem?
Ok here we go,
here is the working solution of your problem,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
clear: both;
background-color: green !important;
background-image:none !important;
display: block;
font-weight: 400;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
color: black !important;
}
i have just edited your code
http://jsfiddle.net/bf1cyptm/1/
:)
Try adding !important in CSS like:
.dropdown-menu li a:hover{
background-color:green !important;
}
If it does not work it could possibly be some other CSS code that is not letting it happen. So the solution to it is to do an inspect element and see which element is affecting it.
If you are not expert in than a best solution for you.
Please add a new class just after dropdown-menu like:
<ul class="dropdown-menu colorchange">
and call CSS by it like:
.colorchange li a:hover{
background-color: green;
}
It should work! You can use important here as well.
Try this
.dropdown-menu li:hover .dropdown-menu li a{
color: green;
}
Trying to change individual links in navbar to different colors when hovered. Can't seem to figure it out.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li class="page-scroll">
1
</li>
<li class="page-scroll">
2
</li>
<li class="page-scroll">
3
</li>
<li class="page-scroll">
4
</li>
</ul>
</div>
CSS:
.navbar-custom li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
Have the current links set to red. But would like each individual link to have a different color. E.g. Link1 = Red, Link2 = Blue.
I am having trouble doing this! Help appreciated!
Thanks!
if you use SASS, it could be done in a more cleaner way like this in your scss file:
$colors: (1: red, 2: blue, 3: yellow, 4: black);
#each $anchor, $color in $colors {
#{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} {
background-color: $color;
}
}
which will generate the CSS:
.navbar-custom .nav li:nth-child(2) a:hover {
background-color: red;
}
.navbar-custom .nav li:nth-child(3) a:hover {
background-color: blue;
}
.navbar-custom .nav li:nth-child(4) a:hover {
background-color: yellow;
}
.navbar-custom .nav li:nth-child(5) a:hover {
background-color: black;
}
Now you could add as many as different colors for all your links and let the SASS generate the CSS for you.
Yeah, just need to class them up uniquely
HTML
<li class="hidden colour1">
</li>
<li class="page-scroll colour2">
1
</li>
<li class="page-scroll colour3">
2
</li>
CSS:
.colour1:hover { background-color:blue; }
.colour2:hover { background-color:red; }
.colour3:hover { background-color:green; }
You would need to assign their CSS for each individual class and give the different link different class
like
.pagescroll1{
}
.pagescroll2{
}
and the call them from your HTML
The elegant solution is to select by attribute value. example for the first one:
a[href="#link1"]:hover,
a[href="#link1"]:active,
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}
however, this works only when you're directly selecting the a-elements. With your third selector li.active, there is no information in that element as to where it links. in this case, you'll have to add classes as suggested by rob.
I am using twitter bootstrap and my menu currently display like:
which is perfect but i need to when in mobile view have the menu display like:
Now I know I need to use media query's and such that's not the problem, the problem is how in CSS do i get my menu styled like that with the lines and such...?
Here's is the HTML:
<!--SUBMENU-->
<div class="row-fluid">
<div class="span12 submenu">
<ul class="nav menu nav-pills">
<li class="item-109"><a href="/stradix/index.php/company-profile" >Company Profile</a></li>
<li class="item-108"><a href="/stradix/index.php/due-diligence" >Due Diligence</a></li>
<li class="item-110"><a href="/stradix/index.php/our-solution" >Our Solution</a></li>
<li class="item-111"><a href="/stradix/index.php/loan-process" >Loan Process</a></li>
<li class="item-112"><a href="/stradix/index.php/currency-converter" >Currency Converter</a></li>
<li class="item-113"><a href="/stradix/index.php/loan-calculator" >Loan Calculator</a></li>
<li class="item-114"><a href="/stradix/index.php/news" >News</a></li>
<li class="item-115"><a href="/stradix/index.php/important-downloads" >Downloads</a></li>
</ul>
</div>
</div>
<!--SUBMENU-->
and The CSS to override default bootstrap:
.submenu .nav-pills > li > a {
font-size:1.25em;
padding:0;
margin:2em 0.9em 0 0;
padding: 0 0.9em 0 0;
color:#6D6E70;
border-right:1px solid #A7A9AB;
border-radius:0;
}
.submenu .nav-pills a:hover {
background:none;
color:#00ADEE;
}
.submenu .nav-pills > .active > a {
background:none;
color:#00ADEE;
}
.submenu .nav-pills > li:last-child > a {
border-right:none;
padding: 0;
margin-right:0;
}
I Would post it on JSFIDDLE But for some reason I am still since Friday unable to connect to jsfiddle..
Any Help Greatly appreciated.. Thanks.
You can do something like this to achieve the desired effect
#media (max-width: 480px) {
.nav-pills > li {
float: left;
width: 50%;
}
}
Check out my JSFiddle for an example
All the browsers are displaying my site good, only internet explorer doesn't.
I've got a menu with background color set in CSS, I've added padding to make sure there is room around the link itself.
Internet Explorer doesn't take the bottom padding.
This is the HTML:
<div class="moduletable_menu">
<ul class="nav menu">
<li class="item-101 current active parent"><a href="/" >Reclamebureau</a></li>
<li class="item-102"><a href="/contact.html" >Contact</a></li>
<li class="item-125"><a href="/diensten.html" >Diensten</a></li>
<li class="item-126"><a href="/portfolio.html" >Portfolio</a></li>
</ul>
</div>
This is the CSS code for the hover and active state:
ul.menu li a:hover,
ul.menu li.active a,
ul.menu li.current a {
display:inline;
color: #ffffff;
background-color: #9a5574;
z-index:10;
text-decoration:none;
padding: 21px 14px 50px 14px;
}
This is the website I'm talking about: www.appelmeule.com
Thank you very much