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.
Related
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
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 bunch of images named after my pages in wordpress. Example:
page name : heart-health
image name : heart-health.png
My main menu has 1 sub-menu level and for each page name in a sub-level I would like to display the image as a background image set to the left. I have tried so many different ways but had no luck.
I know you can add custom text to the menu in the admin but I wish for it all to be done automatically.
I have found the start and end for sub level menu items in "nav-menu-template.php" & "class-wp-walker.php"
At the moment I just have the same picture showing on all sub menu items when you rollover but that is just using CSS.
.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}
Any help or advice would be much appreciated.
The best way to do it is via CSS.
For example
.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }
You can set custom classes for each menu item in the WordPress menu management, just make sure the "CSS Classes" checkbox in "Screen Option" (top right of page) is checked.
Also, to make things easier, I would suggest making an image sprite of all the images you'll be using in the menu so that your CSS code is much simpler.
.menu ul ul a {
background:url('/url-to-sprite.png') no-repeat 0px 0px;
}
.menu ul ul :hover a {
background-position:-20px 0px;
}
.menu ul ul .custom-class a {
background-position:0px -20px;
}
.menu ul ul .custom-class:hover a {
background-position:-20px -20px;
}
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)
As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it's been overidden, but I don't know what by...
If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I'd like to think I can code, but I just can't understand what's overiding the font colour.. I think it's line 73 of the new_menu_style.css file.
You should try adding this to the CSS:
.menu ul li:hover ul li a {
color: #ccc;
}
.menu ul li:hover ul li a:hover {
color: black;
}
The .menu ul li:hover a gets a higher weight than the other one, overriding it.
First: Do something about your code style. proper indentation makes a great effort to increase readability:
So here is a solution: add this to your css as these override the .menu ul li:hover a
.menu ul li:hover ul a {
color:#ccc
}
.menu ul li:hover ul li:hover a {
color:#000
}