Avada and the Ever Changing Header: text instead of a logo.

Sometimes you just want to change something really simple, or at least, it used to be really really simple, back in the old days where you just plopped your html into a file, renamed it php with a few bits of code, and called it your header.

If you want the latest greatest bells and whistles, you use a pre-built theme. I like this one called Avada. Used to be fairly easy to edit the header file.. you chose a header option, then found that file in the template directory, if you’re smart you copied it into your child theme, then edited it to your heart’s content.

Now they tell you to edit your theme using hooks and filters, and while I’ve had success with this to add content to some header areas, I wasn’t able to add WordPress php code without getting the White Screen of Death with a semi-helpful error message.

I wanted to use the good ol’ site title and slogan, which is entered into the general settings in WordPress on every WordPress site, instead of the logo. Why doesn’t Avada use this built in identity gem? No idea. While poking around the theme template files, I found a useful one called “logo.php.”

I created a copy of the logo.php file in a new folder in my child theme I named ‘templates’. In the Theme Options, I just removed the logo, poof, gone. No hiding it with css, no adding pseudo tags to write content…

In the logo.php file, find the beginning:

<div class=”fusion-logo” data-margin-top=”<?php echo Avada()->settings->get( ‘logo_margin’, ‘top’ ); ?>” data-margin-bottom=”<?php echo Avada()->settings->get( ‘logo_margin’, ‘bottom’ ); ?>” data-margin-left=”<?php echo Avada()->settings->get( ‘logo_margin’, ‘left’ ); ?>” data-margin-right=”<?php echo Avada()->settings->get( ‘logo_margin’, ‘right’ ); ?>”>

Right after it, add this:

<span id=”site-title”><a  title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></span><h4 class=”subtitle”><?php bloginfo(‘description’); ?></h4>

Now I didn’t use an H1 tag because it had margins around it that were difficult to overwrite with css. I added my own styles (id=”site-title” and class=”subtitle”) that I added to the child theme style sheet to control the size, spacing, color, hover setting, font, text-shadow, etc.

If you need help customizing your Avada theme, hit me up on my contact page!


By |2018-06-24T22:57:02+00:00August 12th, 2016|wordpress, Avada|


  1. Chris October 22, 2016 at 5:12 am - Reply

    Hi Rochelle,

    Good post and I really need help, please see what you can do.
    I use avada and the header1, which is the first header pre-built in avada theme, the header on top.
    I think you notice that the logo in header is not completely close to the left side, it has some margin like 30px to the left side of the header . There will be some space between the header’s left side to my logo.
    I want to remove the space between them, because the space between my logo and header just make my menu looks weird. Even when I set 0px marigin, it still dont work. I think it is based in the php file.

    Please help if you have time! Great thanks.


    • rochelle April 15, 2017 at 3:52 am - Reply

      Sorry I’ve been ignoring my own website! I’ve overridden those things with styles. I think there is a setting it picks up from layout options where you can control the left and right padding around all the content. I’ve played with the boxed vs full width layout and mixed and matched parts. I also use a plugin now called https://wordpress.org/plugins/re-order-css-and-js-loading-order/ so I can use the child theme to overwrite everything.

      • rochelle October 9, 2017 at 5:52 am - Reply

        Instead of using that plugin, which is now unsupported and seems to break things, change your function file in your child theme, first line where the array is, to

        array( ‘fusion-dynamic-css’ )

  2. Stephanie December 14, 2016 at 12:35 am - Reply

    Hi! I just want to change the url the logo in the header points to. Would that mean that I add the address in each location that says ‘url’ like ‘https://mooretoread.com’

  3. Harsh March 16, 2017 at 5:47 pm - Reply


    Did not get result…

    • rochelle April 15, 2017 at 3:58 am - Reply

      Yeah it’s changed quite a bit since I wrote that! You’re probably using a different version of Avada than this was written for. You can use hooks and filters to change header elements a bit more easily now.

  4. kayon May 19, 2017 at 3:17 am - Reply

    Hi, I would like to customize my header where logo is to the left like below. Can you assist?

    social icons Language switcher
    logo login
    main menu ………………………….

  5. Daniel September 22, 2017 at 6:05 pm - Reply

    Hi Rochelle I got to your page trying to figure out Avadas way of dealing with headers, I’m just trying to change the logo on different pages that’s it, some have dealt With it With id’s and CSS I’m going deeper into it and trying to make it more dynamic With templates, any ideas or sugestions will be much apreciated

    In advance thanks!

    • rochelle October 8, 2017 at 11:35 pm - Reply

      Aye, that is a tough one – have you found any solutions?

    • rochelle April 6, 2018 at 12:06 am - Reply

      I figured out how to do this by uploading a logo and swapping it out based on page ID with CSS and a ‘before’ tag.

  6. Valerie December 20, 2017 at 12:12 am - Reply

    HI Rochelle! I just started working in the Avada theme. Initially the header logo was large, when i scrolled down, it became small (sticky header) but then when i went back up again, it remained small. How do I get to the larger size it initially started out with?

    • rochelle December 20, 2017 at 2:01 am - Reply

      That is odd; it should go back to its original size. You can try playing with the Sticky Animation settings. It could be a caching issue.

  7. Awais February 17, 2018 at 4:13 am - Reply

    Hello rochelle
    I am using avada header-5 and i want some change in it.
    I want to remove upper like this site. https://www.apartmenttherapy.com/

    Can you help how can i achieve this by header-5.

    Thank you

    • rochelle February 17, 2018 at 6:50 am - Reply

      Do you mean for the david-murphy-second-etc. site? You’ll have to lift up the logo with a negative top margin… Then make sure those styles work okay on mobile – usually some adjusting is necessary. Probably your easiest solution.

  8. yaris June 11, 2018 at 2:50 pm - Reply

    Would you please provide a sample that uses the filter, apply_filters( ‘avada_secondary_header_content’, $secondary_content, $content_area, $content_to_display );,

    • rochelle June 29, 2018 at 4:33 am - Reply

      Not sure I’ve used that one… I have used ‘add_action( ‘avada_before_header_wrapper’, ‘avada_add_banner’ );
      function avada_add_banner() {echo ‘insert html content here’;}

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.