Navigation Menu Different Color for Active position

Hi there,
How can I change appearance of menu to alter font color or background for active position of menu.
Thanks a lot

Hey there

I can help you with this, please provide URL of the website and I will generate custom CSS for you.



To change the appearance of a navigation menu and alter the font color or background for the active position, you can use CSS. Here’s a simple example of how you can achieve this:

/* CSS for inactive menu items */
nav ul li a {
  color: #000; /* Default font color */
  background-color: #fff; /* Default background color */

/* CSS for the active menu item */
nav ul li {
  color: #fff; /* Active font color */
  background-color: #000; /* Active background color */

In your HTML, you would add the active class to the menu item that corresponds to the current page:

    <li><a href="index.html">Home</a></li>
    <li><a href="about.html" class="active">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>

In this example, the “About” menu item will have a different font color and background because it has the active class. You can customize the colors as needed for your site’s design.

I hope the information may helps you.

Hey there,

@dennisleon I’m not sure where you found that code, but it’s definitely not relevant to this topic. The question is about a WordPress theme, not an HTML template. Let’s stay on track!