Different colors for page and sub-page titles
-
AuthorPosts
-
equityproductions
MemberHello,
Is it possible to have different colors for the title of pages, sub-pages, sub-sub pages, etc… ?
At least two different colors would be helpful.
Say the main page is Photography, with Wildlife and Fashion as sub-pages (“sub-items” as in the menu nomenclature), I would like to use one color for “Photography” and another one for “Wildlife” and “Fashion”.
Thanks.
The blog I need help with is: (visible only to logged in users)
rezzap
StaffHello!
I’m guessing you’re referring to the title in the menu, correct? You can target a specific menu item with an ID, but you’ll need to do so for each item individually to get the color to display here. For example:
.menu-item-108 a { color: #FFF; }
Will change your current site’s ‘About’ item to white. You’ll need to use an inspector tool to find out the ID of each menu item and edit as required.
Thanks!
Rebecca
It does not seem to work…
rezzap
StaffHello,
This has changed the menu item of the About page for me. See here: https://www.dropbox.com/s/pklz84ixo70wdir/Screenshot%202017-04-18%2022.26.26.png?dl=0. Are you adjusting the ID to change other items?
Thanks!
R.
Not as I am aware.
I really don’t understand how you manage to get it.rezzap
StaffHello,
You’ll need to use an inspector tool, like Chrome’s Developer tools. Right click on the item you want to inspect and then select the ‘inspect’ option. You’ll see a window pop up in the bottom section as shown in the screenshot here: https://www.dropbox.com/s/qxsgaj1q0onuzux/Screenshot%202017-04-19%2014.18.06.png?dl=0. Use those items.
You’ll need to add CSS for each item you want to show in a specific color with the ID for this item as provided above. If you need help finding the ID for a specific item, let me know which ones and I can help you with this.
Thanks,
Rebecca
I know how to get the ID of an item but the color does not change when adding the code. I added the code you gave and for some reasons, it shows a different color on your screen but not on mine.
rezzap
StaffAh, looks like it’s working in Chrome but not Firefox. Try adding the important declaration:
.menu-item-108 a { color: #FFF !important; }
Thanks!
Rebecca
Ah yes….always the browser issue.
Works fine now in Firefox with the “Important” clause.
Thanks a lot !rezzap
StaffGlad to hear! :)
Cheers,
Rebecca
- The topic ‘Different colors for page and sub-page titles’ is closed to new replies.