How To Change Navigation Menu Colors In WordPress (2024)

How to change navigation menu colors in WordPress

Hello everyone, welcome back to another video. I hope you all are doing great and are having an

amazing and absolutely incredible day. I bring you back with yet another video and in this video

we're going to be talking about how you're going to be able to change your menu colors in WordPress

in the easiest, most simplest way possible. So, without further ado, let's get straight into the

workings of this. Now when it comes to changing the actual menu color, what needs to happen

is there's three steps that could, you know, actually work through with this. So the navigation

menu color can be changed through code, okay, it can be changed through some external page builder

or website editor essentially, and then finally it could be changed through, you know, WordPress

settings. So we're going to be talking about all three of those ways. I'm going to be showing you

all three of those ways and trust me, it's going to be really fun, it's going to be really easy to

work with and we're going to have a lot of fun with it. So please do make sure to fully watch

this video till the end to get the whole gist of this with the whole detail. So yeah, without further

ado, let's get straight into video. So to basically start things off, what we are going to be doing

is, first of all, we're going to go ahead into our, you know, basic dashboard over here and in

the basic dashboard there's a few things to, you know, keep in par for yourself. Now obviously

when it comes to, you could say, the basic navigation guide, the basic navigation has

this separate, you could say, viewing or visibility. So if I were to go ahead into my website

or, you know, essentially view my website, I'm just going to open it up, there we go. So I'm

going to click on wizard site and this is my website, you know, there's no header or anything like that

But if I go ahead and click on inspect element, over here is where I can access my actual header

and you can access your header or, you know, your navigation menu by obviously finding your

code for your div class. So around this is going to be, you know, your division for your navigation

menu. So you can obviously change the color through code. Now when it comes to changing the color

through code, that is obviously a bit tricky. So you're going to need to find the, you know

divisional code. Once you've found your divisional code, then you're going to start going into colors

Okay, you're going to find in whichever section they've given you colors. In our case, we have

color over here, you know, there's our land and there's other classes where you can obviously

add your own colors as well. So pretty easy, pretty incredible stuff to get your head around

And obviously you can mess around with the styling of it as well. But obviously depends on

however well you are working when it comes to coding. So that's one of the ways that you can

actually change the color of the navigation menu. But obviously that's code and not a lot of people

you know, enjoy working with code. Now one other thing that you can do is basically like, let's say

I like some coloring scheme, right? So I'm going to come here and you know, you can go to any site

which color scheme you like. So let's say I like some color scheme from Nike's website

I'm going to open up inspect element in Nike's website. Once you open up the inspect element

you're going to, you know, find the navigation bar for Nike. Let's say this is going to be their

navigation bar. So you're going to come here, you're going to click on copy. Okay. And I'm

going to go ahead and copy the element. Now over here, you're going to click on edit page. Once you

click on edit page, it's going to open up a few widgets for you with the editors on the left-hand

side with the workings in. And that is exactly what we are going to get our head into. So once

you're over here, we're going to click on this plus icon. So it gives us a whole thing on the

left-hand side. And once you do this, you can actually go ahead into your additional CSS to

customize things for your page. And obviously in the CSS, you can give your site an identity

You can give it a background image, menus, widgets, homepage settings, and a whole lot more

So in our case, you know, you could either add tools through here. Okay. Or I'm going to come

back over here. I'm going to click on view pages. And once you're in view pages, you could obviously

add things through the plugin tools as well, using the additional CSS. So again, when it comes to the

overall working of your editorial things the CSS outer could be done through the main editor

or you could do it through the plugins. Like if I go on plugins over here, I'm going to go ahead

and just write CSS. And you can see, you can start adding different, simple CSS into your website

You can see simple custom CSS plugin again for the workings of your page. And obviously if you

know how to work with CSS, trust me, I would a hundred percent tell you to go with it because

you know, when it comes to working with CSS, it makes life much easier for you. And you know

because it gives you a variety of features. It gives you this whole world of features that you

can add to your page. And it's just much easier and much, you know, better to work with. Now

basically one more things you can do is you can add an actual plugin and this plugin is going to

be a page editor. So in our case, you have definitely heard of this. It's called elementary

website builder. And in this elementary website builder, you can style your navigation menu

using the editor. Okay. And this editor basically allows you to add all the different types of

designs to add. Okay. You can add any type of design with any type of stylings as well, to be

honest. And you can add different additional CSS through elementary as well, but elementary doesn't

allow you, like it allows you to add code, but you can also just do this through the normal drag and

drop technique. Okay. You don't need to go ahead into code. So yeah, pretty simple and pretty easy

to do all of this, you know, by just one click on Elementor. So yeah, pretty simple, pretty easy

stuff. And obviously in the end, I would definitely prefer the users to go ahead and use the

additional CSS option, but in the case you don't want to do that, it's totally fine because I

understand a lot of people don't like working with code. Okay. So yeah, basically that's about it

These are the different ways how you can, you know, add different attributes and things into your page

and you know, actually color your navigation menu. So that's essentially about it for this video

Now, if you enjoyed watching this video all the way till the end, please make sure to drop down a

like and subscribe to the channel. And if you want to see more videos like this in the future

let me know down in the comments below and I'll be making more for you, but yeah, that's pretty

much about it. Thank you for watching till the end and I'll see all of you next time. Goodbye