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!

Rochelle

By | 2016-08-12T00:34:36+00:00 August 12th, 2016|wordpress, Avada|

11 Comments

  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.

    Chris

    • 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 ‘http://mooretoread.com’

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

    Hi,

    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?

Leave A Comment