I want to have horizontal menu, e.g. 4 buttons/links in 4 different bgcolor with their respective siblings in the same color: e.g. 1st menu item in RED and with its siblings in red, 2nd one in GREEN and siblings in green, 3rd one in black and black siblings and 4th one in yellow and yellow siblings. the parent level menu will be of fixed width. 2nd levels may differ.. allowing line breaks/auto wrapping etc.
any suggestion on multicolor menu, please?
Thank you
e.g. img http://www.cssmenusamples.com/wp-content/uploads/2010/03/wakestock.jpg
If your parent menus have unique ids or classes you can do it with css (example).
If your theme/module does not print unique ids/classes you can add them with theme_menu_link function or with module menu_attributes.
You can use conditional CSS.
li a { border: 5px solid #FFFFFF; }
li:first-child a{ background-color: #000000; }
li:first-child + li > a{ background-color: #0000FF; }
li:first-child + li +li > a{ background-color: #00FFFF; }
li:first-child + li +li +li > a{ background-color: #00FF00; }
Change the color codes as you like..Hope this will be helpful to you.
Related
How do I stop a border being applied twice... once for the active item and once on the hover?
I've tried using .navbar a:not(.active):hover but it doesn't work. I've also tried giving all navbar items a bottom border that is of the required thickness but of the background colour and changing the colour on the hover.
The desired effect is that the active item is in bold and has a white bottom-border, whilst the item the mouse is over also has a white bottom-border (shown in red in the image) but isn't in bold (as both colours will be white I'm not bothered about which one 'wins'). But my problem is when the mouse is over the active item the bottom-border is added twice.
It's most likely due to a border being applied to 2 different elements.
I made you a fiddle to understand the issue.
As you can see all is working correctly because both the .active class and the :hover pseudo class are referred to the ul > li.
ul > li.active{
border-bottom:3px solid red;
}
ul > li:hover{
border-bottom: 3px solid yellow;
}
If you try for example to change the :hover to ul > li > a you see the double border.
ul > li.active{
border-bottom:3px solid red;
}
ul > li > a:hover{
border-bottom: 3px solid yellow; /* double border */
}
I'm working on a Wordpress site and am not fully following the html and css given to me.
I have a rule that says when a menu item is hovered, make the background of the line item orange and the nested anchor text white:
.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);
Then:
.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}
The first rule works the second does not. Using the inspect element feature I notice that when I apply this rule it becomes scored out. When I apply the rule outline: solid 1px to see the nested anchor, it is indeed smaller than the parent line item when my goal is to make it match the size.
Here is the nav: http://jsfiddle.net/hfnjgjxf/
Notice that when you hover over the menu items the text only changes to white when you hover over the center (the inner a tag). The inner a tag should be the same size as the parent so that when hovered, the text turns to white, on any part of the line item.
Hope I'm talking sense. If you view the fiddle you'll see what I mean.
Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.
However, you could simply achieve that by adding the padding on anchor tags instead of the list items:
EXAMPLE HERE
.dropdown ul li {
/* padding: 7px 10px; */ /* Remove this declaration */
border: none;
border-right:2px solid lightblue;
background-color: transparent;
}
.dropdown ul li a {
display: block;
padding: 7px 10px; /* Add this instead */
}
It would not be required in this situation to make the anchor element the same size as its parent, but just to apply the effect to the anchor, based on the hover of the parent li. You can achieve that by changing the selector to match the li hover rather than the a hover.
.dropdown > ul li:hover > a {
color: white;
}
http://jsfiddle.net/hfnjgjxf/2/
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;
}
li.widget ul li {
margin-bottom: 0.714em;
background-color: #000000;
}
on Rootmyandroid.org
I want to set the background color of right side bar sub widget links to black so I have given #000000 color. And I have set the thing (for which I want to add black background) to green color on hover.
When I use firebug to inspect CSS, it does not show the background-color: #000000;
What could be the issue?
In your custom.css you have a line:
//side bar edit start color wala
this is not a valid comment and so the rule
li.widget ul li {
margin-bottom: 0.714em;
background-color: #000000;
}
is ignored
comments on styles sheets are always opened /* and closed */:
/*side bar edit start color wala*/
Set the background-color in your layout.css at line number 227
li.widget ul li {
background-color: black;
margin-bottom: 0.714em;
}
If you're trying to change the color of the LINKS, you have to add "a" like so:
li.widget ul li a { ... }
or
li.widget a { ... }
Hi I have a little CSS problem with a Superfish menu, when an active menu is hovered the color: #000000 don't apply, both background and color is white. The inactive menu works as I want.
Example:
Menu 1 (active)
- Bla
- Bla
Menu 1 (active & hover)
- Blank
- Bla
pastebin: http://pastebin.com/ziYaZJ3e
.ot-menu li li a:focus, .ot-menu li li a:hover, .ot-menu li li a:active {
background: #FFFFFF;
color: #000000;
border-bottom: none;
outline: 0;
}
.ot-menu .current_page_item li a, .ot-menu li .current_page_item a {
background: black;
border-bottom: none;
color: white !important;
}
The color set here is the reason you are getting white on white. But if disabled the non-hovered active text becomes black on black BG. You need to re-structure your style rules / ordering.
Where possible try to avoid using !important where you can as it can make tracking down styling issues very difficult (speaking from experience, I've produced some really nasty style-sheets lazy-coding with it).