Ok, I tried to add what you suggested from menu-item-1 but it didn't do anything. Do I need to add anything to the main index page php for it to pick it up?
Ok, I found all the menu item numbers and added them into the css. Hasn't done anything. The code that you just put above do I need to include that for it to work?
Yeah...when I say Web Inspector, I really mean the developer tools that are built into most browsers.
In Chrome / Safari, you can just 'right-click' and 'inspect element'.
In IE just hit F12.
In Firefox, I think you have to install the Firebug extension ( I know I did) . If there are native tools in FF, they are probably along the same lines.
Oh...and definitely use Chrome as your default browser*.
Additionally, because of the way your CSS is structured, you're going to need to set your color on the a element itself, like so:
.menu-item-25 a { color:#fff }
.menu-item-27 a { color:#154AEB; }
.menu-item-26 a { color:#15EB79; }
.menu-item-40 a { color:#15EB79; }
.menu-item-39 a { color:#15EB79; }
.menu-item-35 a { color:#15EB79; }
.menu-item-36 a { color:#15EB79; }
.menu-item-23 a { color:#15EB79; }
And on line 840 of style.css too: color: #f0f0f0;.
IDs are 256 times more specific than classes, or something like that. Thusly, these two lines are overriding your declarations because they're using more specific selectors. There are two ways to fix this:
1.) The proper way: remove (or comment out) the above two lines of CSS.
2.) The easier way (but adding needless specificity that will be hard to overwrite later if needed)—change your class selectors to ID selectors, since each of your links have IDs anyway:
#menu-item-25 a { color:#fff }
#menu-item-27 a { color:#154AEB; }
#menu-item-26 a { color:#15EB79; }
#menu-item-40 a { color:#15EB79; }
#menu-item-39 a { color:#15EB79; }
#menu-item-35 a { color:#15EB79; }
#menu-item-36 a { color:#15EB79; }
#menu-item-23 a { color:#15EB79; }
Also, thanks to looking at your website, I now have Paper Planes by M.I.A. stuck in my head. "No on on the corner got swagga like us/"
I just realised the #access a where the menu-item is, is the highlighter colour. I want to change the colour of the word from white to individual colours. Would I do this in the same way?
Hi people!
Is it possible to change the colour of the font in the menu so that each menu item (just the heading, not the drop down) is a different colour?
If so, what is the code I would need to put into the css to make this happen?
http://getyourswaggaback.com
Thank you!
There are a few ways.
The simplest is to assign a class to each top level list item.
As these already exist for you; 'menu-item-26' etc, you can just do something like
etc.
}
This is the current code for that section, well that's where I changed the font size and it worked.
Putting font styles in that section will change them for everything in your menu...and that's not what you wanted.
Hey Paulie,
Thanks for replying, this is the only place I found menu-item within the css
access li.current_page_item > a,
access li.current-menu-item > a {
}
Should I add the relevant numbers within this section? How will I assign numbers to the relevant heading?
Thank you
You probably won't find the suggested code in the existing CSS.
You'll have to add it yourself.
Ok, I tried to add what you suggested from menu-item-1 but it didn't do anything. Do I need to add anything to the main index page php for it to pick it up?
Your top level menu items all have specific numbers....you can see them in the HTML in Web Inspector.
Have you gone through and added classes for all of them?
If you have then you might try commenting out (not deleting)
and seeing what happens.
Oh I'm sorry, I've never used Web Inspector. Is that a program I have to download or something I can do online?
Ok, I found all the menu item numbers and added them into the css. Hasn't done anything. The code that you just put above do I need to include that for it to work?
access li.current_page_item > a,
access li.current-menu-item > a {
}
.menu-item-25 { font-colour:#fff }
.menu-item-27 { font-color:#154AEB; }
.menu-item-26 { font-colour:#15EB79; }
.menu-item-40 { font-colour:#15EB79; }
.menu-item-39 { font-colour:#15EB79; }
.menu-item-35 { font-colour:#15EB79; }
.menu-item-36 { font-colour:#15EB79; }
.menu-item-23 { font-colour:#15EB79; }
@CMonique, web inspector is part of chrome's developer tools. using it is an essential component of a web designer/developer's workflow.
check out this introduction here: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools/
@dfogge, thank you, I don't use google chrome.
I have found the correct menu item numbers though, can you please look at this code and tell me where I'm going wrong?
access li.current_page_item > a,
access li.current-menu-item > a {
}
.menu-item-25 { colour:#fff }
.menu-item-27 { color:#154AEB; }
.menu-item-26 { colour:#15EB79; }
.menu-item-40 { colour:#15EB79; }
.menu-item-39 { colour:#15EB79; }
.menu-item-35 { colour:#15EB79; }
.menu-item-36 { colour:#15EB79; }
.menu-item-23 { colour:#15EB79; }
Thank you
you really should use chrome.
i think the problem is you're using the uk spelling of color in your code. try taking out the u's. ;)
Yeah...when I say Web Inspector, I really mean the developer tools that are built into most browsers.
In Chrome / Safari, you can just 'right-click' and 'inspect element'.
In IE just hit F12.
In Firefox, I think you have to install the Firebug extension ( I know I did) . If there are native tools in FF, they are probably along the same lines.
Oh...and definitely use Chrome as your default browser*.
*fanboi
Additionally, because of the way your CSS is structured, you're going to need to set your color on the
aelement itself, like so:But srsly, use Chrome. All the cool kids do!
Ok, I'll look into Chrome when I've finished. I've done the script exactly like that now, but still...nothing.
Not sure what else to do.
It looks like this is being set in your
<head>:And on line 840 of
style.csstoo:color: #f0f0f0;.IDs are 256 times more specific than classes, or something like that. Thusly, these two lines are overriding your declarations because they're using more specific selectors. There are two ways to fix this:
1.) The proper way: remove (or comment out) the above two lines of CSS.
2.) The easier way (but adding needless specificity that will be hard to overwrite later if needed)—change your class selectors to ID selectors, since each of your links have IDs anyway:
Also, thanks to looking at your website, I now have Paper Planes by M.I.A. stuck in my head. "No on on the corner got swagga like us/"
There are other selectors overriding what you have added.
You would need to comment out
Line 342 of stylesheet
Line 837
I just realised the #access a where the menu-item is, is the highlighter colour. I want to change the colour of the word from white to individual colours. Would I do this in the same way?
That will change the color of all a links inside the element with an ID of #access.
That wasn't what you wanted.
No, I wanted to change the heading as you see them (currently white) without the hover. I.E. MUSIC (red) VIDEOS (blue) etc.
I need the menu to resemble this one
http://sbtv.co.uk/
We've told you how to do that.
Keep trying.