How to modify my main navigation menu with CSS

I have a suggestion.. I don’t know exactly what kind of customizations you want to do but start with a child theme.. and Customizr has one here.

If you go to that page you’ll find a link to the snippets section and you can search for some code to, for example, center the nav menu, change the color, etc.

From there, and with that code, you would put that into the child theme’s css file.

Something like that.

Hope that helps!

Thanks for the response. I did install Child Themify instead of the one you linked because the developer version would fail upon attempting to install. I have the child theme all set up and working fine. I have CSS code entered for one of my tables and that is working just fine. However, when I try to implement CSS code for modifying the nav menu, nothing seems to work. I searched the code snippets and I believe these are what code I should be using. Only I see no change when I save and publish. Am I doing something wrong or is something being overwritten?

https://www.themesandco.com/snippet/change-navbar-colorsfontsize/

https://www.themesandco.com/snippet/adjust-navbar-box-settings/

Can you give a concrete example of something specific that you want to do (preferably with a link to your site) so we can walk you through it?

So, on the nav menu of my home page (https://knightfoxpc.com/), I would like to modify the menu items below:

Home
Services
Gallery
About
Contact

Specifically I would like to change the font size, color and possibly make it bold or add a few effects. I tried the CSS code snippets in the two links above which were listed on the customizr developer website. But as I mentioned, I don’t see anything being changed. So I’m not sure if perhaps the theme is overriding something. And I am using a child theme (Child Themify) as instructed by the developer. Any help/suggestions would be greatly appreciated. Thank you.

If you have setup the Child Theme then fine. You don’t need the Plugin anymore so deactivate it. If that doesn’t fix it then you need to do the Plugin Test completely:
Deactivate all plugins
Test if OK
If OK, reactivate plugins one-by-one to find the culprit

I believe only the default set of plug-ins that came installed with WordPress are present. I think perhaps my issues is either I’m not using the correct CSS code or I’m not entering it in the correct location.

That code from those links looks right, so I’m not sure why it doesn’t work. Where are you placing that code?

In the appearance -> customize section. Then in the Custom CSS text area. I have other CSS code in there to modify one of my tables so I know it works somewhat. Just not sure why I can’t change the menus. Doesn’t seem like it should be all that difficult. I read a few other topics where it was suggested to had !important or something like that to it which “forces” the effect I guess?

Also, that menu I’m trying to change is called “Menu 1” in my set-up. Do I need to specify that somehow in the CSS code?

Something I just thought of. Are you trying to style your normal menu or the dropdown menu that appears at a smaller window size? You need to use different CSS code to target the dropdown menu.

Right now I don’t have them configured as drop-down menus. They just navigate to the target page. Do I need to modify the HTML code for my main page to tell it to point at the CSS instead of the primary theme? Something similar to this perhaps? https://www.ads-software.com/support/topic/how-to-add-css-for-custom-page-template?replies=10

I’m still a bit confused about what’s going on, because the code snippets provided in those links should work. Are you trying to style the nav menu in the header or the footer (down near the search bar)?

In the header. And when I do update/save from the CSS, I see no change what-so-ever.

Oh and for the record, I only picked the first snippet from the first link I provided (i.e. /* Adjust Menu (red) text color, (Garamond) font-family, (1.5em) font-size */).

If your child theme is active, it looks like it is, try adding it to the style.css under Appearance > Editor
EDIT: And add the whole block of code just to test.

LOL, I just did that batharoy. And guess what, the text has changed some now. Definitely operator error in not using ALL the code. I thought I could just pick and choose which little pieces to use. But apparently I needed all of it. I guess that was yet another lesson learned. Thanks so much for everyone’s help and suggestions. Much appreciated. And I’m sure I will be back with more questions. =)

I am working in a formflex theme. They offer no support when something was customized. Someone modified the navbar area to include a phone number. That person is now nowhere to be found! My client is asking me to change the number. I cannot figure out how to accomplish this – Help? https://www.pavinggeorgia.com