DEV Community

Cover image for Custom CSS in Avada: Beyond the Theme Options Panel
Martijn Assie
Martijn Assie

Posted on

Custom CSS in Avada: Beyond the Theme Options Panel

#webdev #wordpress #tutorial #css

You've maxed out Avada's built-in styling options but still can't get that button exactly right. Or that heading. Or that spacing that's driving you crazy...

Time to break out custom CSS!!

But here's the thing - most Avada CSS tutorials just tell you WHERE to put code. This article gives you a complete toolbox of WHAT code to use, plus the knowledge to write your own. Ready to level up?

Where to Add Custom CSS in Avada

Before we dive into the toolbox, let's nail down the basics. Avada gives you multiple places to add CSS, each with its own purpose.

Global CSS (Site-Wide)

Avada → Options → Custom CSS

This is your main CSS location. Anything you add here applies to your entire site and overrides default Avada styles. Perfect for brand-wide changes like custom fonts, button styles, or color tweaks.

Page-Specific CSS

In Avada Live: Sidebar → Page Options → Custom CSS

In Backend Builder: Click the </> icon in the toolbar

This CSS only applies to that one page. Perfect for landing pages, sales pages, or anywhere you need unique styling without affecting other pages.

Child Theme (The Professional Way)

For serious customization, use a child theme's style.css file. This keeps your CSS:

  • Safe from theme updates
  • Organized in one place
  • Version-controllable with Git

More on child themes later...

Understanding Avada's CSS Structure

Before you start overriding styles, you need to understand how Avada names things.

Common Avada Class Prefixes 

.fusion-       /* Fusion Builder elements */
.avada-        /* Theme-specific styles */
.awb-          /* Avada Website Builder (newer) */
Enter fullscreen mode Exit fullscreen mode

Key Structural Classes 

/* Containers */
.fusion-fullwidth           /* Full-width container */
.fusion-builder-row         /* Row wrapper */
.fusion-layout-column       /* Column outer div */
.fusion-column-wrapper      /* Column inner div (where styling applies) */

/* Header */
.fusion-header-wrapper      /* Main header container */
.fusion-main-menu           /* Navigation menu */
.fusion-is-sticky           /* When header becomes sticky */

/* Content */
.fusion-page-title-bar      /* Page title section */
.fusion-footer-widget-area  /* Footer widgets */
.post-content               /* Main content area */
Enter fullscreen mode Exit fullscreen mode

The Class vs ID Field

Every Avada element has fields for custom CSS Class and ID. Here's when to use each:

Class (.) - Use for styling you'll apply to multiple elements
ID (#) - Use for unique, one-time styling

/* Class - can reuse on multiple elements */
.my-special-button {
    background: linear-gradient(45deg, #ff6b6b, #feca57);
}

/* ID - unique to one element */
#hero-cta {
    font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

The Specificity Problem (And How to Win)

Your CSS isn't working?? Nine times out of ten, it's a specificity issue.

Avada's CSS is highly specific. A simple selector often won't override it. Here's the hierarchy:

Inline styles (highest) → ID selectors → Class selectors → Element selectors (lowest)
Enter fullscreen mode Exit fullscreen mode

Winning Strategies

Strategy 1: Match or exceed the specificity

Find the original selector with browser DevTools (right-click → Inspect), then match it:

/* If Avada uses this: */
.fusion-button.button-default {
    background: #333;
}

/* You need at least this specificity: */
.fusion-button.button-default {
    background: #ff6b6b;
}
Enter fullscreen mode Exit fullscreen mode

Strategy 2: Add a parent selector

/* More specific = wins */
body .fusion-button.button-default {
    background: #ff6b6b;
}
Enter fullscreen mode Exit fullscreen mode

Strategy 3: Use your custom class

Add a class like my-red-button to the element, then:

.fusion-button.my-red-button {
    background: #ff6b6b;
}
Enter fullscreen mode Exit fullscreen mode

Strategy 4: The nuclear option - !important

.fusion-button {
    background: #ff6b6b !important;
}
Enter fullscreen mode Exit fullscreen mode

Use !important sparingly!! It makes future changes harder. But sometimes it's the only way...

The CSS Toolbox: Copy-Paste Solutions

Here's what you actually came for - ready-to-use CSS snippets for common Avada customizations.

Header Tweaks

Hide sticky header on specific page:

/* Add to page-specific CSS */
.fusion-is-sticky {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

Change sticky header background:

.fusion-is-sticky .fusion-header {
    background-color: rgba(0, 0, 0, 0.9) !important;
}
Enter fullscreen mode Exit fullscreen mode

Reduce sticky header height:

.fusion-is-sticky .fusion-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.fusion-is-sticky .fusion-logo img {
    max-height: 40px !important;
}
Enter fullscreen mode Exit fullscreen mode

Navigation Styling

Custom menu hover effect:

.fusion-main-menu > ul > li > a:hover {
    color: #ff6b6b !important;
    border-bottom: 2px solid #ff6b6b;
}
Enter fullscreen mode Exit fullscreen mode

Remove menu item underlines:

.fusion-main-menu > ul > li > a {
    text-decoration: none !important;
    border-bottom: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Button Customizations

Gradient button:

.fusion-button.my-gradient-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    transition: all 0.3s ease;
}

.fusion-button.my-gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

Ghost/outline button:

.fusion-button.ghost-btn {
    background: transparent !important;
    border: 2px solid currentColor !important;
}

.fusion-button.ghost-btn:hover {
    background: #333 !important;
    color: #fff !important;
}
Enter fullscreen mode Exit fullscreen mode

Typography Tricks

Page title with text shadow:

.fusion-page-title-bar .fusion-page-title-row h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Enter fullscreen mode Exit fullscreen mode

Gradient text effect:

.gradient-text {
    background: linear-gradient(90deg, #ff6b6b, #feca57);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

Better heading line-height:

.fusion-title h1,
.fusion-title h2,
.fusion-title h3 {
    line-height: 1.3 !important;
}
Enter fullscreen mode Exit fullscreen mode

Mobile Responsive Fixes

Hide element on mobile:

@media only screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
}
Enter fullscreen mode Exit fullscreen mode

Hide background image on mobile:

@media only screen and (max-width: 768px) {
    .fusion-fullwidth.my-hero-section {
        background-image: none !important;
    }
}
Enter fullscreen mode Exit fullscreen mode

Adjust column order on mobile:

@media only screen and (max-width: 768px) {
    .reverse-on-mobile .fusion-builder-row {
        display: flex !important;
        flex-direction: column-reverse;
    }
}
Enter fullscreen mode Exit fullscreen mode

Fix mobile menu colors:

@media only screen and (max-width: 768px) {
    .fusion-mobile-nav-holder a {
        color: #333 !important;
    }
}
Enter fullscreen mode Exit fullscreen mode

Spacing and Layout

Remove container top/bottom padding:

.no-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
Enter fullscreen mode Exit fullscreen mode

Equal height columns (using flexbox):

.equal-height .fusion-builder-row {
    display: flex !important;
    flex-wrap: wrap;
}

.equal-height .fusion-layout-column {
    display: flex !important;
}

.equal-height .fusion-column-wrapper {
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Fixed height for content boxes (prevents layout jumping):

.fusion-content-boxes .fusion-content-box-hover {
    min-height: 300px;
}
Enter fullscreen mode Exit fullscreen mode

Image and Hover Effects

Image zoom on hover:

.zoom-hover img {
    transition: transform 0.5s ease;
}

.zoom-hover:hover img {
    transform: scale(1.1);
}
Enter fullscreen mode Exit fullscreen mode

Grayscale to color on hover:

.grayscale-hover img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.grayscale-hover:hover img {
    filter: grayscale(0%);
}
Enter fullscreen mode Exit fullscreen mode

Image overlay on hover:

.overlay-hover {
    position: relative;
    overflow: hidden;
}

.overlay-hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay-hover:hover::after {
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

WooCommerce in Avada

Style add-to-cart button:

.fusion-woo-cart-table .fusion-button,
.woocommerce .button.add_to_cart_button {
    background: #ff6b6b !important;
    border-radius: 25px !important;
}
Enter fullscreen mode Exit fullscreen mode

Hide variable product price range:

.woocommerce-variation-price {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

Using CSS Variables in Avada

Here's something cool most people don't know - you can use CSS variables directly in Avada element settings!!

Avada already uses variables for global colors. But you can create your own:

Add to your global CSS:

:root {
    --brand-primary: #ff6b6b;
    --brand-secondary: #feca57;
    --brand-dark: #2d3436;
    --spacing-large: 60px;
    --spacing-medium: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Use in element settings or CSS:

.my-branded-section {
    background-color: var(--brand-primary);
    padding: var(--spacing-large);
}
Enter fullscreen mode Exit fullscreen mode

The advantage?? Change --brand-primary once, and every element using it updates automatically.

Browser DevTools: Your Best Friend

Can't figure out which CSS selector to use? Let the browser tell you.

Chrome/Firefox:

  1. Right-click the element you want to style
  2. Select "Inspect" (or press F12)
  3. Look at the Styles panel on the right
  4. Find the current CSS rules affecting that element
  5. Copy the selector, modify it, test it right there
  6. Once it works, paste it into Avada

Pro tip: You can edit CSS live in DevTools to test changes before committing them. Just click on values and type new ones...

Child Theme Setup for Avada

For projects where you'll add significant CSS, a child theme is the professional approach.

Creating an Avada Child Theme

1. Create folder: /wp-content/themes/Avada-child/

2. Create style.css:

/*
 Theme Name: Avada Child
 Template: Avada
 Version: 1.0
*/

/* Your custom CSS goes below */
Enter fullscreen mode Exit fullscreen mode

3. Create functions.php:

<?php
function avada_child_enqueue_styles() {
    wp_enqueue_style('avada-parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('avada-child-style', get_stylesheet_directory_uri() . '/style.css', array('avada-parent-style'));
}
add_action('wp_enqueue_scripts', 'avada_child_enqueue_styles');
Enter fullscreen mode Exit fullscreen mode

4. Activate: Appearance → Themes → Avada Child

Now any CSS in your child theme's style.css will override parent theme styles - and survive theme updates!!

Common CSS Mistakes in Avada

Mistake 1: Forgetting the dot or hash

/* Wrong */
my-class { color: red; }

/* Right */
.my-class { color: red; }
Enter fullscreen mode Exit fullscreen mode

Mistake 2: CSS in wrong location
Global CSS won't work for page-specific elements generated by Avada Live. Use page-specific CSS instead.

Mistake 3: Caching
Changed your CSS but nothing happened? Clear:

  • Browser cache (Ctrl+Shift+R)
  • Any caching plugin (WP Rocket, etc.)
  • Avada's built-in cache: Avada → Patcher → Clear Avada Caches

Mistake 4: Overusing !important
If you need !important on everything, you're fighting specificity wrong. Be more specific with selectors instead.

When CSS Isn't Enough

Sometimes CSS can't do what you need. For those situations, consider:

  • Avada's Dynamic CSS - Global Options has fields for many customizations
  • JavaScript - For interactive behaviors CSS can't handle
  • PHP (functions.php) - For server-side changes
  • A different theme - If you're constantly fighting Avada's structure

Speaking of alternatives - Divi uses a more straightforward CSS architecture that's sometimes easier to override. Plus their unlimited licensing means you're not paying per-site for client projects. Worth considering if you find yourself writing CSS workarounds constantly...

Wrapping Up

Custom CSS in Avada isn't scary once you understand:

  1. Where to add it - Global, page-specific, or child theme
  2. How specificity works - Match or exceed Avada's selectors
  3. How to find selectors - Browser DevTools are essential
  4. Ready-made solutions - The toolbox snippets above save hours

Bookmark this article. Next time you need to tweak something in Avada, check the toolbox first - your solution might already be here ;-)

Got a CSS challenge I didn't cover? Drop it in the comments and I'll add it to the toolbox!!

This article contains affiliate links!

Top comments (0)