Avada is a powerful and versatile WordPress theme.
For just $60 a pop, it’s worth it.
While Avada is extremely customizable right out of the box, you’re not going to get a truly custom site without having some coding knowledge here and there.
For example, one common issue is when a client wants the Page Title Bar to be shorter (not a problem) but doesn’t want the text to shift up behind the Header menu, like this (check out the “Who We Are”)
It’s not pretty, and it makes it look like something is wrong with the page!
Luckily, this post will show you how to get here (see below), with some Custom CSS in Avada’s Theme Options.
Ahhh, what a nice, balanced, professional, not-broken-looking Page Title Bar.
Let’s dive in!
How Can I Add Space Above the Page Title Bar in Avada Theme for WordPress?
The first thing you should know about Avada is that while there are many elements with a user-friendly interface for customization, there are other elements that don’t have the this surface-level interface.
The Page Title Bar is one of them. While you can find many options in settings, such as Page Title Bar position. You can also choose whether to Show Content Only, Show the Bar and Content, or Hide it entirely.
If you don’t want the Page Title Bar showing at all, you can stop here!
How to Hide the Page Title Bar on Avada Theme for WordPress
- Navigate to your WordPress dashboard.
- On the left-hand menu running from top to bottom, tap or hover over “Avada” toward the top
- Click or tap on “Theme Options”
Theme Options are Global Options.
Setting Global Options means we are setting a Global (or site-wide) Default for a given setting.
Even after changing Global Options, we can still alter individual pages. Consider Global Options as creating a Default setting which will take effect unless overridden by specific Page Options.
Page Options are available at the bottom of every page in your WordPress Pages. Simply scroll all the way down, and you can find Page Title Options in one of the tabs, like this
Page Title Bar Options (to keep the list non-repetitive, we took out the words “Page Title Bar” before each option, just FYI)
- Show Breadcrumbs, Search Bar, or None
- Hide or Show Page Title Bar Text
- Title Alignment (Left/Center/Right)
- Upload Background Image
- 100% Background Image (Yes/No)
- Parallax Background Image (Yes/No)
If you’re wanting to alter one of the above, you’re in luck! Simply alter the Global Options here in Theme Options.
If you’re looking to change anything Title Bar related that is NOT in the list, you’re going to need to make custom changes.
We’re not just going to show you how we made our custom changes, adding padding above the Title Text to keep it from sticking above the Header.
We’re also going to show you how to alter other Avada / Fusion Builder elements you didn’t know you could have control over.
First off, you should know that we’re using the Chrome browser for this (recommended).
How to Use Custom CSS to Edit Predefined Avada Elements
Avada has created predefined classes for all elements. If we can find out what the class names are for the elements we want to alter, we can change them in another Theme Options section, Custom CSS.
Find Out Avada Fusion Builder Elements Class Names
- Navigate to the live version of the page you want to edit an element on. If it’s an element on multiple pages, you can still start with just one of the pages containing the element.
- Right click right on the element, like this:
3. Click Inspect on the bottom of the right click menu
4. If you’re using Chrome (recommended), you’ll notice it highlights the line corresponding to the element in the developer console that shows up to the right.
5. The Page Title Bar has several elements involved, but the Title Bar text specifically is designated by .entry-title. This is the class we’ll be targeting in our Custom CSS.
6. In a new tab, open Avada Theme Options.
7. Scroll to the bottom of the Theme Options tabs menu and click on Custom CSS.
8. Enter the following line of code. Be sure to leave in the !important;
padding-top: 150px !important;
Now, what we are actually doing is adding to this predefined Class.
Also, the !important; is so that this line of Custom CSS takes precedence over any other lines that would conflict, like the class’s default padding, if it has any.
9. Save Changes.
10. Then open a Page in Edit mode
11. Next click Update, just in case
12. Click to Preview the Page
13. Verify the change has been made.
14. Lastly, adjust the 150px as needed to either increase or decrease padding – some testing will be needed here.
What do you guys think? What other unconventional Fusion Builder element would you like to learn how to edit in Avada? Leave your comments below.
If you had any trouble at all with the process, if you find yourself stuck, or just if you’d like some general WordPress or Avada advice, please don’t hesitate to Contact Us