Back to Community
Home / Community / Theme → Inspiro

How to Change Menu and Link Colors in the Inspiro Theme with Custom CSS

26 threads Sep 9, 2025 Theme → Inspiro

Content

Many users of the Inspiro theme encounter a common challenge: customizing the colors of their menus, links, and buttons. This is a frequent topic of discussion, especially after theme updates that can sometimes alter existing color settings. This guide compiles the most effective solutions based on community support threads.

Why This Happens

The Inspiro theme uses a predefined color scheme. While the Customizer offers some basic color options, many specific elements—like mobile menu backgrounds, link hover states, and submenu borders—are not directly adjustable in the free version's settings. This often leads to users needing to add their own custom CSS to achieve the desired look.

Common Solutions for Color Customization

1. Using the Customizer's "Custom" Color Option

Before diving into code, check if the built-in option works for you. In your WordPress dashboard, navigate to Appearance → Customize → Colors. Select the "Custom" option. This will reveal a color picker that allows you to change the theme's default teal/accent color. This will update this color globally across the theme, affecting links, buttons, and other elements.

2. Adding Custom CSS Code

For more precise control, you will need to add custom CSS. This is done in the Customizer under Appearance → Customize → Additional CSS. Below are the most common code snippets requested by users.

Change Mobile Menu/Sidebar Background Color

To change the background color of the menu that appears on mobile devices, use this code. Replace the hex code (#274425) with your desired color.

.side-nav__scrollable-container {
    background-color: #274425;
}
Change Desktop Submenu Colors

To change the background color of dropdown submenus on desktop and the colored border at the top, use this code. Adjust the colors as needed.

@media (min-width: 64.0625em) {
    .navbar-nav ul {
        border-top: 2px solid #0bb4aa; /* Top border color */
        background: #101010; /* Submenu background color */
    }
}

.navbar-nav>li>ul:before {
    border-bottom: 8px solid #0bb4aa; /* Arrow color */
}
Change Link Hover Color

To modify the color of links when you hover over them, use this general code snippet.

a:hover {
    color: #D8A641 !important;
}
Change Button Hover Color

To change the hover color of buttons in the hero area, use this code.

.custom-header-button:hover {
    background-color: #0bb4aa; /* Your desired hover color */
    border-color: #0bb4aa;
}

Important Considerations

  • Specificity: If your CSS isn't working, the theme's default styles might be overriding it. Using !important (as shown in the link hover example) can force your style to apply, but it should be used sparingly.
  • Page Builders: If you are using a page builder like Elementor, some colors may be controlled within the page builder's own settings panels, not the theme Customizer.
  • Theme Updates: Occasionally, a theme update may change CSS class names or structure. If your custom CSS stops working after an update, you may need to update your code to match the new selectors.

By using these methods, you can significantly expand the color customization options of the Inspiro theme without needing to edit theme files directly.

Related Support Threads Support