Easy Avada 5.06 Header Customization (including example code and instructions)
Is there an easy way to customize the Avada header? I don’t like any of the pre-built templates.
One of the most frustrating features of Avada theme is the limited ability to customize your header from Theme Options. While I believe that Avada is the greatest premium WordPress theme on the market, this is one area that I have repeatedly requested (unsuccessfully) some flexibility.
We recently took on a client that was adamant about header design, and none of the pre-designed templates were even close. This is made more difficult mainly because Avada is so responsive and mobile-friendly. All of the Avada header templates are designed to score 100/100 for Google’s Mobile Friendly Test, and you definitely do not want to break that functionality. After all, isn’t this one reason you bought the Avada theme?
My first instinct was to go back to the client and try to convince her that customizing the included Avada header templates could break her responsive. In the end, we came up with a simple solution that was so effective and elegant that it surprised me (and works perfectly across devices).
The client wanted her logo and a CTA banner at the top of the header, with the main menu and secondary menu below. The closest Avada header (V4) places the logo and banner area in the middle, with the secondary menu location at the top. Here is what we did..
<?php
// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
exit( 'Direct script access denied.' );
}
?>
<?php
$content_1 = avada_secondary_header_content( 'header_left_content' );
$content_2 = avada_secondary_header_content( 'header_right_content' );
?>
<!--<div class="fusion-secondary-header">
<div class="fusion-row">
<?php if ( $content_1 ) : ?>
<div class="fusion-alignleft"><?php echo $content_1; ?></div>
<?php endif; ?>
<?php if ( $content_2 ) : ?>
<div class="fusion-alignright"><?php echo $content_2; ?></div>
<?php endif; ?>
</div>
</div>-->
First, here is the new code for the custom header..
Existing client header, with old, unresponsive theme design:
You can see the two menus, one on top of the other, with logo on top. Unfortunately, the closest Avada has to choose from is this:
This does not look very similar, does it? Here is what we came up with, as well as a happy client:
This custom Avada header kept 100% of responsive and mobile-friendly, and took us about 15 minutes to figure out.
Here is how we did it.
- Create a Child Theme for Avada. Avada updates often, and unless you put your custom code in a Child Theme, you will lose all of your hard work and custom code each time there is an update.
- Copy the code above, paste it into the Child Theme, and hit Save. Then activate your new theme – presto!
