BugWP logo BugWP
Back to Community
Home / Community / Theme → Bravada

How to Customize Your Bravada Theme: Common CSS Fixes for Menus, Headers, and More

27 threads Sep 16, 2025 Theme → Bravada

Content

Many users of the Bravada theme run into similar challenges when trying to customize its appearance. The theme offers a range of options in the WordPress Customizer, but some design tweaks require a bit of custom CSS. This guide compiles the most common issues and their solutions, based on community discussions.

1. Changing the Main Navigation Menu Text Color

The Problem: The site text color setting in the Customizer often does not affect the main top navigation menu.

The Solution: You will need to add custom CSS. The exact CSS selector can vary, but you can try the following in the Appearance > Customize > Additional CSS panel:

.bravada-fixed-menu .menu-item a { color: #yourcolorcode; }

Replace #yourcolorcode with your desired hex color code.

2. Setting Defaults for the Block Editor (Gutenberg)

The Problem: There is no built-in setting to universally change the default heading level (e.g., from H2 to H1) or color for new Heading blocks.

The Solution: While you cannot change the block's initial default state without code, you can style all headings site-wide with CSS. For example, to make all H2 elements red:

h2 { color: #e52424; }

This will style the headings on the front end of your site after you publish them.

3. Adding a Background to the Menu or Text

The Problem: Users often want to add a colored box behind the menu or text to improve readability against a background image.

The Solution: This requires CSS to target the correct element. For a menu background, you could use:

#header-section { background-color: rgba(255,255,255,0.8); }

For a box around text within the page content, you can use a plugin that adds a background option to blocks or apply CSS to a specific block's class.

4. Changing the Header Arrow's Color and Size

The Problem: The black navigation arrow on featured images can be hard to see.

The Solution: A confirmed solution is to use the following CSS in the Additional CSS section:

.meta-arrow {
    font-size: 2em;
    color: red;
}

Adjust the font-size and color values to your liking.

5. Adjusting the Landing Page Banner Height

The Problem: The full-height landing page banner might be too tall or too short for your design.

The Solution: You can control the banner's height using viewport height (vh) units with this CSS snippet:

.bravada-fullscreen-headerimage .lp-staticslider-image,
.bravada-fullscreen-headerimage .lp-staticslider {
    height: 60vh;
}

Change the 60vh value to achieve your desired height.

6. Changing CTA Button Colors

The Problem: The Customizer's accent colors may not style all Call-To-Action (CTA) buttons as expected.

The Solution: To style the first CTA button on a slider, which often has a white border, use this CSS:

a.staticslider-button:first-child {
    border-color: #C00;
    background: #000;
    color: #C00;
}

Important Notes on Using CSS

  • Always add custom CSS in the Appearance > Customize > Additional CSS panel. This is the safest place to add code.
  • CSS changes may not appear immediately due to caching. Clear your browser cache and any site caching plugins after making changes.
  • The exact CSS selectors (like .menu-item) can change between theme versions. Use your browser's inspector tool (right-click > Inspect) to find the correct classes for your site.

These solutions are community-contributed and have worked for many users. If a solution does not work for you, the specific CSS selector may need to be adjusted for your unique site setup.

Related Support Threads Support