Avada // template hack to add top bar to Header 7

This is just a quick example I put together on a staging site rather than share client info/content.

The first thing I did was create the two new widget areas I wanted to use, one for the left, one for the right:

Both are using a the Visual Editor plugin widget, but any text or html widget will do. I’ve placed a telephone number/link in the left, and an email address/link in the right:

Once that’s done, you can pull the widgets in to the header 7 template.

Here’s the full content of the header-v7.php template I’m using in the child theme, in the “templates” directory. I’ve labeled the custom section that goes right above the “fusion-header” div.

Copy to Clipboard

<?php
/**
 * Header-v7 template.
 *
 * @author     ThemeFusion
 * @copyright  (c) Copyright by ThemeFusion
 * @link       https://theme-fusion.com
 * @package    Avada
 * @subpackage Core
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
?>
<div class="fusion-header-sticky-height"></div>

<?php // CUSTOM EDIT TO ADD TOP BAR TO HEADER //
				echo do_shortcode('<div id="top-bar-main"><div id="top-bar-left">[fusion_widget_area name="top-bar-left"/]</div><div id="top-bar-right">[fusion_widget_area name="top-bar-right"/]</div></div>'); ?>

<div class="fusion-header" >
	
	<div class="fusion-row fusion-middle-logo-menu">
		
		<?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?>
			<div class="fusion-header-has-flyout-menu-content">
		<?php endif; ?>
				
		<?php avada_main_menu(); ?>
		<?php avada_mobile_menu_search(); ?>
		<?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?>
			</div>
		<?php endif; ?>
	</div>
</div>

Here’s the css I’m using. The chances that this is all the custom css you’ll need are pretty slim. This is just showing some basics to get you started…. I didn’t do anything here to style it for mobile.

Copy to Clipboard

Here’s the result: