I'm trying a pure css approach to keeping the 'parent-most' navbar item highlighted when a child is clicked upon and a user navigates to that page. I have a primary navbar div with an unordered list, and each list has a list like so, so in this case a user navigates to the second most li here:
.primary-navbar ul li ul li{
background-color: red !important;
}
how do I make it so when the second li is active, the first li has background color of blue?
I tried:
.primary-navbar ul li:active {
background-color: blue !important
}
but that did not work and I'm not sure why. I'm trying to avoid jquery...
:active is the state of the element when active (i.e. a link is active when it is clicked). When you load the new page, no elements are active. You'll need to add a class to the li on the new page (something like 'active' or 'current-page' for example) to get the effect you're looking for. It's not possible with CSS only.
When you implement that, you should also take a second look at your CSS:
.primary-navbar ul li.active {
background-color: blue !important
}
That will not only make the first (parent) li.active blue, it will also target any li.active nested beneath it. i.e. it will also make .primary-navbar ul li.active ul li.active blue.
Try something like:
.primary-navbar > ul > li.active {
background-color: blue;
}
The >s will only target the li.active that is directly under the ul that is directly under .primary-navbar
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
I'm trying to make a list that has a different first letter for some of the items in the main menu. I have the first-letter psuedo element working across the list, but don't want it to show on the first and last child in the list.
.main-navigation li a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li a:first-letter {
color: #6a6a6a;
}
I'm using the first part this code to colour the first letter in the menu items, and then the second part to stop the sub-menu items taking that colour.
However, trying to use
.main-navigation li a:first-child:first-letter {
color: #f0f0f0;
}
is giving every first letter in the menu items and sub-menu items that colour, rather than just the first one (Home in my fiddle)
I want Home and Contact Us not to show the orange colour, or else show a different colour (the default one), whichever is easiest. Can someone help?
http://jsfiddle.net/wM9eA/
You need to target the li element with first-child, the same goes for last-child.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter{
color: #f0f0f0;
}
Working Fiddle
You want the first and last li elements.
.main-navigation li:first-child a:first-letter,
.main-navigation li:last-child a:first-letter {
color: inherit;
}
The problem here is that :first-child applies to the element that it's applied to directly, while :first-letter applies to that element's content. Saying a:first-child will pick the first a inside the li, and there are only one a in each li. We need to apply select that to the li.
Working Fiddle
.main-navigation li:first-child a:first-letter {
color: #e88a2a;
}
.main-navigation li ul li:first-child a:first-letter {
color: #6a6a6a;
}
I have a site here
At the top of the screen, you'll see a menu. Hover onto "Everything" and you'll see a sub-menu.
When you hover over an item, you'll see a dark grey background on each menu item. The text stays red, and I want the text to be white on hover.
Here's what I have so far...
#nv-tabs ul li ul li:hover {background: #252525!important; }
It looks like the text color (on hover) should also be in this div id, so I've tried this...
#nv-tabs ul li ul li:hover {background: #252525!important;color: #FFFFFF;}
...but it's not working.
Not sure where I'm going wrong here.
Try
#nv-tabs ul#dyndropmenu.menu li ul.sub-menu li a:hover {
color:white !important;
}
^ should make the text white on hover while the other texts stay red.
Try something like this #nv-tabs ul li ul li:hover a {color: white !important;}
Considering you said your code is not working... you may have something setting the color of the text of your <a> tags directly... that's why you possibly need to access directly your <a> tags to change their text color...
I can see this in your code :
#nv-tabs a {
color: #000000;
}
I think this is why you must access your <a> tags directly to change the color. If the color was set with #nv-tabs ul li ul li you could probably do #nv-tabs ul li ul li:hover to change it.
If someone can name this behaviour, I'd be pleased. I don't know how it is called, but I'm pretty sure that's how it works.
I'm having a bit of trouble with inheritance. if you expand the first menu item and mouse over you'll see a grey fly-out with a link in it. the link inside inherits the original styles and I'm not sure how to stop it from taking on those styles. i just want them to be the default link style while inside the fly-out. I've tried selectors but i'm not having any luck. ideas?
I put my code up here: http://pastie.org/3388191
Just use a CSS's child combinator, ul > li to define the styles to your main list items, that way those styles won't be inherited past your second level subnav, like so:
#nav > ul > ul {
background-color: #999999;
height: 299px;
margin: 0;
padding: 0;
width: 652px;
}
Demo: http://jsfiddle.net/kQuGd/1/show/
EDIT
Read your question too fast and didn't see what your real problem was, sorry about that. There's two ways (that I know of) to fix your link problem.
One way is to add the third level menu links to your default style
a, #nav ul ul a {
// YOUR STYLE PROPERTIES
}
a:hover, #nav ul ul a:hover {
// YOUR STYLE PROPERTIES
}
The second way is to assign a class to either the links in the third level menu, or the links in the first and second level menus.
If you assign a class to the third level links, just apply the same styling to that class as your default links.
If you assign classes to the first and second level links instead, and thus remove all link styles like
#nav ul a
your third level links will automatically get the default link style.
The problem is the use of #nav a which applys a styling to all links within #nav
On the following test site (http://tronitech.brettatkin.com/index.asp), I want each navigation element to have a different look when it is the active page.
I have assigned a class to the anchor element when that page is active.
When I add the CSS inline, it works (the home page for example), but when I drop it in a class it doesn't.
Here is my CSS:
#navigation ul li .active-link a {
color: #326ea1;
background-image: url(/images/nav-current.jpg);
background-repeat: repeat-x;
}
I think it is something with inheritance, but I'm not seeing the issue...
Thanks
Brett
Change your selector to the following
#navigation ul li a.active-link
a .active-link tries to match an anchor tag with a child that has class active-link. a.active-link matches anchor tags with class active-link.
it's not #navigation ul li .active-link a but it should be #navigation ul li a.active-link. The first rule says link that is decendant of class active-link whlie second says link with a class active-link - which is what you've got in your markup.
In fact both selectors are way too long.