I have one strange issue with my website. I work on this site
and want to change main menu hover links from white to orange. This is the CSS from that part:
.darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link
{
color: #fff !important;
I wanted to change that hover to white, and tried to override white with orange color. I inserted the following CSS:
.darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link
{
color: #f06623 !important;
But after reloading the page, hovers on links are still white. I am wondering why the white color is not being overwritten by the orange color. I know that last CSS with !important rule is last one, and overrides all before placed. I tried to find that CSS line in theme CSS files, but can't find it nowhere. Someone to help me how to change that hover to orange?
You can replace nav with your parent element or class or id
nav .darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
nav .darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link
{
color: #f06623 !important;
}
CSS is executed procedurally. To override an !important css-rule, simply define another css-rule further down in the CSS-file with the !important flag.
// First we set the color to blue
.div1 {
background-color: blue !important;
}
// The background color is changed to green
.div1 {
background-color: green !important;
}
// The backgorund color is NOT changed to red, due to the !important flag above.
.div1 {
background-color: red;
}
If you have access to html, add a ID, it will increase the specificity.
But with you don't have acces to html, try override the specificity by this snippet:
.darkheader .navigation > ul > li.menu-item:hover > a.menu-link..menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link.menu-link
{
color: #f06623 !important;
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 was working on this site MY Site . the menu bar shows a black color on hover .I need different colors to show on each menu item hover.I have tried the following code in my css but didn't work
nav.main_menu>ul>li:hover>a span:nth-of-type(1){background-color:#161f30 !important;} nav.main_menu>ul>li:hover>a span:nth-of-type(2){background-color:#161f30 !important;}
also i tried
nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}
this also didn't work.can anyone please help me to achieve this? Please!! Thanks!!
Try this css
nav.main_menu > ul > li:nth-child(1):hover {
background:#ff0000 !important;
}
nav.main_menu > ul > li:nth-child(2):hover {
background:#ff00ff !important;
}
nav.main_menu > ul > li:nth-child(3):hover {
background:#ff0ff0 !important;
}
nav.main_menu > ul > li:nth-child(4):hover {
background:#ff0aa0 !important;
}
nav.main_menu > ul > li:nth-child(5):hover {
background:#ff0eee !important;
}
nav.main_menu > ul > li:nth-child(6):hover {
background:#ff0dd0 !important;
}
Try the following
.main_menu > ul > li:nth-child(1):hover > a span {
// styles
}
Better is to add classes to your nav elements.
.main_menu-home { // styles }
.main_menu-artists { // styles }
and so on
I'm having a little trouble with background color of my dropdown menu. I changed the color of background color on hover to orange. But, if I go to any submenu in that dropdown, the color of parent item change to default blue. Don't know, how to explain it better, I will just show a picture:
So, as soon as I hover over subitem, the parent background color change to blue. I was trying to do a selector for that but ran out of ideas. Any help please?
I think you need something like this to ensure all CSS selectors are covered...
/* change background color on hover */
.dropdown-submenu > a:focus, .dropdown-submenu > a:hover, .dropdown-submenu:focus>a, r, .dropdown-submenu:hover>a,
.dropdown-menu > li a:hover,
.dropdown-menu > li a:focus { background-color: orange; background-image: none; filter: none; text-decoration: none; border: none; }
Demo: http://bootply.com/75155
This is the site in question: http://bnurowing.com
I would like to change every part of the current orange navigation background with red (#bf2323).
Can someone please tell me the lines of CSS code I need to replace the values of?
I've tried changing some of the values but when I hover over 'Committee & Coaches' (About > Our Club), it turns to this red color when I want it to stay black.
Any advice would be much appreciated!
Change #F24830 in style.css to:
(line 291)
.sf-menu > li > a:hover,
.sf-menu > li.sfHover > a,
.sf-menu > li.current-menu-item > a {
background: none repeat scroll 0 0 #BF2323;
}
(line 310)
.sf-menu li li a {
background: none repeat scroll 0 0 #BF2323;
}
Most modern browsers have an inbuilt DOM inspection tool, so you can see where and what styles are being applied on the specific element(s).
In
li.current-menu-item > a {
background: ##bf2323;
}
Try That.
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).