I was working on the customization of the template of my web and suddenly, the main menu for some specific pages get disturbed (the frontpage and some other pages are OK).
One of my changes disturbed the rest and I can't find the element that causes the problem.
I am searching for more than one hour already (via Firebug and the coding tool in Chrome "F12") and can't see it.
The first item in the menu had a different color and the border-bottom of the "li" elements of the submenu is bigger than it should be (has to be 1px).
I don't want to spam but I think it will be easier if I put the links:
frontpage: http://imagingshop.dreamhosters.com/ (menu = OK)
one of the problematic pages: http://imagingshop.dreamhosters.com/sharpzoom
--> you will immediately see the difference
the Contact, Services and Tutorials pages are ok, the problem is only at the Product pages.
Thanks a lot for your help.
This css
#main-menu .menu a.active-trail
{
color: #FFFFFF !important;
}
gives the white color to your product.
Change it like
#main-menu .menu a.active-trail
{
color: #AAAAAA!important;
}
Remove the class active-trail it makes your "products" text white.
You have a problem in file http://imagingshop.dreamhosters.com/sites/default/files/css/css_qLs_s8izWGQLERkNiGEldBLDTETyDfKs-iFsVg6MKfE.css:
main-menu .menu a.active-trail {
color: #FFF !important; <--- remove this line
#main-menu .menu a.active-trail {
color: #FFF;
}
Just remove !important from color attribute
css_qLs_s8izWGQLERkNiGEldBLDTETyDfKs-iFsVg6MKfE.css
#main-menu .menu a.active-trail {
color: #FFF;
background: #C00;
}
Related
I have a wordpress website and I have a button in the header menu which is called 'Join as a tradesperson'.
http://prntscr.com/px7mdt
It has a green border and white background and the text is black.
I wanted the background of the button to change to green (color: #25ad00) and the text to change to white (color: #fff) when I hover over it.
I have added the following code to custom css is the dashboard:
body #menu-item-1847 a{
color:#000;
}
#menu-item-1847 a{
font-weight: 700;
border: 2px solid #25ad00;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1847 a:hover {
color: #fff;
background-color: #25ad00;
}
...but now when I hover over the button the background turns green but the text remains black:
http://prntscr.com/px7o9u
I was jut wandering what is wrong with the code as I thought the
#menu-item-1847 a:hover {
color: #fff;
...would change the color of the text to white when I hover over it?
Thank you
It's all about your DOM's CSS specificity you can make your code working without adding !important.
Just increase the CSS specificity. (share your HTML I will explain you this with CSS specificity)
Please read about CSS specificity. Using !important is not good practice. It is not clean code. Go through these articles.
Don't use !important instead increase CSS specificity
Is Using !important is a right choice?
To overwrite existing CSS, add !important like this:
#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}
You can using !important statement like this.
(If you specified the selector correctly, if not, double check the selector #menu-item-1847)
#menu-item-1847 a:hover {
color: #fff!important;
}
It means, something like:
Use me, if there is nothing important else around!
I am using materializecss framework for my website. I am using a scrollspy function for the navigation bar. But I want to change the default color of red to white and change from vertical line to a horizontal line underneath nav links.
Now I have this
What I want is
JS code for scrollspy function.
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I don't know which specific classes to change.
If you don't want to use a side table of contents on your website, you can change the css for the table-of-contents class.
Go to the materialize.css file, and find the following code:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-left: 2px solid #ea4a4f;
}
Then you can replace it with this:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-bottom: 2px solid white;
}
To see the results, you have to link the materialize.css file instead of materialize.min.css in your html. In a production environment, you will need to minimize the modified materialize.css file.
Maybe it's a little late, but I hope it will help.
of-content class, you can add css like this
nav ul li a.active {
border-bottom: 1px solid #333;
}
means, when element a is active, it will give border-bottom
I'm trying to change the background colour of the autocomplete when an item is being hovered and I just can't get it to work. I managed to change the general background colour with .ui-menu-item a and have tried to use :hover, :focus, :active but none of them do the trick. Can anybody tell me what the right class is to do this?
CSS:
.ui-widget {
font-size: 0.75em;
}
.ui-menu-item a {
background-color: #fff;
}
In my case following code worked for me. Hopefully it helps someone.
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
background: #6693bc !important;
font-weight: bold !important;
color: #ffffff !important;
}
Hovered autocomplete items get the class ui-state-focus applied, so you can target them via CSS with:
.ui-menu-item a.ui-state-focus {
/* your rules */
}
jsFiddle example
Note that newer versions of jQuery UI might need .ui-menu-item.ui-state-focus instead.
The only way I could get it to work was opening the developer tools in IE and seeing what was being called to change the colors. I found this:
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover
so if I add this to my style sheet I am using to override classes (last style sheet to be loaded):
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover
{
border: 1px solid #000;
background: #000;
}
seems to work well for me. You may need to close and reopen your browser after making the change.
I resorted to this as none of the other suggestions seemed to work for me. Posting this as it may help someone else who runs into the same issue..
I need help in margin problem. I am using a accordion menu like this: http://jsfiddle.net/knovice/ppdp1w04/2/
and there is margin-top for every second level sub menu e.g if you click Design then its sub menus are having margin-top.
I am trying to remove margin-top of only first second level sub menu. That should gets apply to every first second level sub menu of my accordion menu.
I tried this below code but its not working.
#dhtmlgoodies_slidedown_menu > .slMenuItem_depth2 > :first-child { margin-top: 0 ;}
How should I do that?
Many thanks in advance.
NOTE: I am using external js which adds the classes on load. (pointed out by Banana in the comment section)
I did manage to make it work as:
.slideMenuDiv2 > ul > li:first-child a {
margin-top: 0 !important;
}
EDIT:
Or, to run away from !important directive, you need to drop dhtmlgoodies_slidedown_menu bit from your dhtmlgoodies_slidedown_menu .slMenuItem_depth2 selector to make it:
.slMenuItem_depth2 { /* Sub menu items */
margin-top:1px;
background-color: rgb(204, 204, 204);
margin-top: 1px;
padding-left: 15px;
color: #0065AA;
}
so you could have:
.slideMenuDiv2 > ul > li:first-child a {
margin-top: 0;
}
which I like much more
JSFiddle is here
Please check jsfiddle.
If i understood your requirement correctly. I have put border to second level first element border in red color.
You can apply required style to element
ul li > ul li:first-child{
border:1px solid red;
}
I'd like to say right off the bat that THIS IS NOT A CSS PROBLEM. The following is simply to demonstrate with css the kind of problem I'm having.
In an html page filled with javascript and css, there is a <div> tag with the following styling:
div {
background-color:#fff;
}
div:hover {
background-color:#f00;
}
div:active {
background-color:#000;
}
Point being, I can tell when the element is being hovered because the background will be red, and I can tell when it is clicked because the background will be black.
What's happening is that the hover styling works, but when I click the element, it doesn't change to the active state until, still holding the mouse button down, I pull the mouse out of the element.
This is probably a result of my messing around with the event handlers on the page, but I'm just wondering if anyone else has come across this phenomenon and knows what it might be.
Edit
Here's what I'm working on: http://faithserve.com/jOS/
Click the "App" Menu, and click start. That button-ish thing is what I'm having the problem with.
You problem is the order of the css definitions. States have a particular order in which they need to be defined. See the end bit of this answer: https://stackoverflow.com/a/7508202/476786
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
In your question you have them the correct way, so it can't be repro'd, whereas I have a demo here which shows the wrong way too: http://jsfiddle.net/pratik136/nbW6L/
/* Right */
div.right {
background-color:#fff;
}
div.right:hover {
background-color:#f00;
}
div.right:active {
background-color:#000;
}
/* Wrong */
div.wrong {
background-color:#fff;
}
div.wrong:active {
background-color:#000;
}
div.wrong:hover {
background-color:#f00;
}
You have to be sure CSS rule :hover is setted before :active. You could use that instead of just :active :
div:hover:active {
background-color:#000;
}
DEMO