😜 Change Menu Font Color or Background Color in WordPress

By | November 5, 2019


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 a
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, “semi colon, 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.

5 thoughts on “😜 Change Menu Font Color or Background Color in WordPress

  1. Felix Högsander Post author

    For those who say they tried this and it didnt work I had the same issue BUT when Kori says "Semicolon" it's actually a regular : not with a comma at the bottom, just a regular dot : : : : : 🙂 hope that helps

    This : below is not a semi but a regular and that's what threw me off at first 😛 so hope it helps
    <span style="background-color:

    Reply
  2. Karen Wisch Post author

    I wish I could love this!! What a simple example of how easy it is to tweak WordPress. Thank you Kori!

    Reply
  3. zaid haris Post author

    hi that's amazing but if i want to make the menu transparent as to slider picture in background how to do that i am stuck a week ago searching youtube and internet but didn't find the result yet hope you will help?
    thanks waiting for your response?

    Reply
  4. Visualmodo Post author

    Nonprofit WordPress Theme https://visualmodo.com/theme/nonprofit-wordpress-theme/ Nonprofit WordPress theme is a powerful responsive charity / donations / foundation / fundraising premium WordPress theme packed with features designed for Charity, Church, NGO, Fundraising and more. 🆘💁‍♀️🌎❤️

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *