- This topic is empty.
-
AuthorPosts
-
March 14, 2013 at 8:07 am #43383CMoniqueMember
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?
Thank you!
March 14, 2013 at 8:20 am #128171Paulie_DMemberThere 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
.menu-item-26 {
color: pick a color;
}.menu-item-27 {
color: pick another color;
}etc.
March 14, 2013 at 8:20 am #128172CMoniqueMember#access ul {
float:left;
padding:0;
margin:0;
list-style:none;
font-size:21px;
font-weight:600;
text-transform:uppercase;
}This is the current code for that section, well that’s where I changed the font size and it worked.
March 14, 2013 at 8:22 am #128174Paulie_DMemberPutting font styles in that section will change them for **everything** in your menu…and that’s not what you wanted.
March 14, 2013 at 8:23 am #128175CMoniqueMemberHey Paulie,
Thanks for replying, this is the only place I found menu-item within the css
#access a:hover,
#access li.current_page_item > a,
#access li.current-menu-item > a {
background:#000;
color:#fff;
text-decoration:none;
}Should I add the relevant numbers within this section? How will I assign numbers to the relevant heading?
Thank you
March 14, 2013 at 8:55 am #128178Paulie_DMemberYou probably won’t find the suggested code in the existing CSS.
You’ll have to add it yourself.
March 14, 2013 at 9:05 am #128181CMoniqueMemberOk, 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?
March 14, 2013 at 9:15 am #128184Paulie_DMemberYour 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)
#access a {
color: #ffffff;
}and seeing what happens.
March 14, 2013 at 9:19 am #128185CMoniqueMemberOh I’m sorry, I’ve never used Web Inspector. Is that a program I have to download or something I can do online?
March 14, 2013 at 10:13 am #128190CMoniqueMemberOk, 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?
March 14, 2013 at 10:18 am #128191CMoniqueMember#access a:hover,
#access li.current_page_item > a,
#access li.current-menu-item > a {
colour:#fff
background:#000;
text-decoration:none;
}.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;
}March 14, 2013 at 10:21 am #128192dfoggeParticipant@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/
March 14, 2013 at 10:28 am #128193CMoniqueMember@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 a:hover,
#access li.current_page_item > a,
#access li.current-menu-item > a {
colour:#fff;
background:#000;
text-decoration:none;
}.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
March 14, 2013 at 10:30 am #128194dfoggeParticipantyou 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. ;)
March 14, 2013 at 10:46 am #128195Paulie_DMemberYeah…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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.