This is CRAZY simple to do. Watch Kori Ashton from WebTegrity give you the simple fix for changing a menu item color in WordPress in this video tutorial.
Here is the nerd code for you to copy and paste.
<font color=”#8bb662;”>Menu Item Name</font>
<span style=”background-color:#ff0000; padding:22px;”>Menu Item Name</span>
Full Transcript
Hey y’all, welcome to another WordPress Wednesday. My name is Kori Ashton here in San Antonio, Texas at WebTegrity and we are the home of all things WordPress, social media marketing and Search Engine Optimization and you have found a YouTube Channel solely dedicated to those topics. If you are interested in improving your online marketing, be sure to subscribe to our YouTube channel here and catch us every single Wednesday hanging out with you to improve your online marketing.
Today I’m going to be looking at a hack. How do go into your WordPress menu or any menu for that matter and change the color of a menu item. You can do this with a drop down option or the main navigation, doesn’t matter. It’s a really cool, little bit of nerd code. Don’t be intimidated because it’s super easy. Ultimately, I’ll give you the ability to copy and paste the nerd code in. So, super easy. Here we go. Check this out.
I’m using Twenty Seventeen theme just for this particular tutorial. You see here that I’ve got different menu items across the top here. What if I want “Donate” to just really pop off the page a little bit more than what it is? Maybe I want a background color around it or something to make it more of a CTA or a “Call to Action” button. How would we do that? So, this is my main navigation- or menu is what WordPress calls them. Going into your dashboard, go to “Appearance” and go to “Menus”. You will basically get to this screen here. You can choose and be sure that you’re affecting the correct menu. These are going to vary depending on your theme or the developer that created your theme. Scrolling down, I want to affect this “Donate” option, right here. I’m going to open this little drawer up and right here inside the navigation label…Check this out, y’all.
This is HTML ready. We can actually put nerd code right here inside of this little fill-in-the-blank line and affect his one menu item. Super, super easy. So, check this out. Here’s what you’re going to type… Let’s do a different background color first. Let’s do an open angle bracket, the word “Span” and then “Style= open quotes, close quotes) and we’re going to back inside those two and you’re going to write “background dash color”. Then, “semicolon pound sign” and then you’re going to put in your color code. Whatever unique color code you want to do. Close your angle bracket. There you go. After the word, we need to close that little tag. We’re going to close it just like that with an angled bracket. Close.
I’m going to click “Save Menu” and just let you see what we’re up to here. I’m going to go back to the front side of the website and click refresh. You can see now that donate has a little bit of a red background and it doesn’t give me as much as I would like to have around it. Kind of some padding to open that up and make it look a little bit more like a button. Let’s add just a little bit more nerd code in there to make that happen. We’re going to come back in here and before the close quote, we’re going to put a space and we’re going to add in the word “Padding (colon)”. I’m just going to throw in something you can play around with. Maybe the height or width that you want here for padding; but, I’m just going to put 22 pixels for now. Click “Save Menu”. Let’s go back to the front side of things. Click “Refresh”. There it is. It really looks like an awesome “Donate” button. Pretty cool there.
Of course, you want to double check this to be sure that it still works in responsive mode and that you like the look of it there. This would affect that menu item, as well. What if you just simply wanted to change the font color? That’s even easier. Oh yeah. Here we go. I’m going to back all this goodness out here and I will show you that you can actually use this tag “Font color equals open quotes” We’re going to go ahead and put in a color code here. There we go. Then we’ll close that. Click “Save” Now, the red background should go away but the font color should, in fact, be red. That’s the color option that I choose. You, of course, can choose any color that you would like to make that jump off the page more. Kind cool, right? It’s pretty amazing.
So, I will put these two scripts in the link below. Click on that link, get over to our website and check out all the amazing tutorials that are over there. Literally, you will be able to copy and paste this into your website. Always have a backup in place if you’re tinkering around with cool nerd code like this. Know the strategy behind having to click “restore” if you do something a little wonky. But, what’s cool about this is that any style sheet stuff that you have in place for updating your theme, this will always stay there. It will never be overwritten. So, that’s really cool. I have an older video, also, for improving your WordPress menu overall. I’ll put the link to that one (It’s like 2 years old, but it’s still very relevant) I’ll put the link to this one in the description box, as well. So, be sure to check that one out.
I will see y’all next WordPress Wednesday. Bye, y’all.
Another Video to Edit Your WordPress Menu
