Change one menu item's font and style
-
I would like to change the color and style of just one top nav menu item (Shop the Store!) on my site blog.bluezelia.com.
I understand that I need to add code to the CSS file. Something like this example from another support thread:
#access li.page-item-37 a {
font-family: curlz mt; font-size: 23px; color: #aabadd;
}However, I am not sure how to identify the item number associated with ‘Shop the Store’. I am also not positive about where to add the code. I am guessing in this block:
#branding ul.menu,
#colophon #access-footer ul.menu {
font-size: 14px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;Any ideas?
-
Do you have a Custom CSS plugin, or does your theme come with a Custom CSS part of the dashboard?
I don’t use a plugin but I can access the CSS file.
What does that mean, are you editing the style.css file of the theme?
Yes
Can you instead use a Custom CSS plugin? Like this http://wordpress.org/plugins/custom-css-manager-plugin
I would prefer not to. I can play with the code myself. Only have one question really…how to identity item number associated with ‘Shop the Store’?
#access li.page-item-?? a {
font-family: curlz mt; font-size: 23px; color: #aabadd;
}Where ‘??’ equals number associated with ‘Shop the Store’
Try using a browser tool like Firebug: http://getfirebug.com – Right click on your menu item and select “Inspect element” to expose its associated HTML.
Thanks. I’ll give that a try.
I did identify the element and added the ‘#access…color: #5CACEE’ to the CSS file (see below):
}
#branding ul.menu,
#colophon #access-footer ul.menu {
font-size: 14px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
#access li id=”menu-item-364″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-364″ a {
color: #5CACEE;
}
}I didn’t see a change to the page (reloaded, cleared cache…). Did I make a mistake with the line syntax?
Sorry I’m not comfortable giving advice to change the theme’s files, as other people will be reading this thread and may think it’s okay to do so.
I’ll keep researching.
This theme has custom CSS – so why are not not using that?
I’m not sure what you mean. The catch box theme allows me to access the style.css file. It is in this file that I have made many customization.
allows me to access the style.css file. It is in this file that I have made many customization.
When you update the theme, all of those changes will be lost. The purpose of having custom CSS is to avoid that. You should be ADDING your CSS changes to the custom CSS – which will override existing CSS and not be lost upon update.
Can you tell me how to access the custom CSS?
- The topic ‘Change one menu item's font and style’ is closed to new replies.