change text color topbar menu

Hi mysterious. This css should change the topbar text color and size:

#nav-topbar .nav li a {
  color: #f00;
  font-size: 18px;
  }

Hi bdBrown,

I don’t know much about html and css programming, can you explain where to put your information with the editor of wordpress, wich theme part, or seperate file. I will appriciate that, so I can learn from it.

Inspired greets,

Mysterio

Hey there mysteriousinspiration,

You can add the code to your child theme style.css. You can find additional information on how to create a child theme here:

https://codex.www.ads-software.com/Child_Themes

As an alternative you could use a plugin to add custom CSS. One of the plugins that you could use:

https://www.ads-software.com/plugins/simple-custom-css

Once the plugin is installed and activated you can add the code to Appearance >> Custom CSS.

Hope this helps.

Best regards,
Bojan

Hello Bojan,

Thanks for you assistance.

I have install the plugin, and put your code in, and enter to activate the custom code, but nothing happened.

This is how it looks in the custom css:
/* #nav-topbar .nav li a {
color: #000000;
font-size: 18px;
}
*/

What step i’m missing?

You can take a look at mysteriousinspiration.com to see the progress of my site. Another strange thing what happened, is that my links are strange color green, the same as my menu layout, i can’t find where to change this in the theme options menu, is this normal?

Inspired greets, Mysterio

Hey there Mysterio,

The code was provided by bdbrown so you might wanna thank him for it ??

The issue appears to be related to you putting the code between the comments. A CSS comment starts with /* and ends with */, everything put between those two will be ignored by browsers.

Remove those two and the code should work ??

Best regards,
Bojan

The plugin can be a bit misleading for someone not familiar with css. When you open the css screen the first line is /* Enter your custom css here */. So it’s easy to see how you might put the code between the comment delimiters. What you can do is place comments within your code so you remember what it’s for. In this case you might add a line something like this just above the code:

/* Change the topbar menu color */
#nav-topbar .nav li a {
  color: #000000;
  font-size: 18px;
}

Hi bdbrown, sorry for interrupting in the thread but I want to ask a small question.

How to change the topbar menu link hover color? Also, how to change the hover color for search magnifying icon in top bar. Actually, I managed to do both but you can provide a shorter code for sure. ??

Site: https://test.webtrickz.com/

@mayurjango – Please start your own topic. If it’s related to this issue then you can reference this post in your topic. Thank you.