2020 Update!
I had a site that is changing its branding, but not quite yet! I wanted to mock up something on the site with a new logo, and found a way to hide the logo from a specific page, then add in the new logo just for that page. All doable with functions!
I figured it out using the instructions on this site, https://www.webzando.com/blog/how-to-have-a-different-logo-on-a-page-in-avada-theme/
Then I started working on another project that doesn’t have a logo.. and just want to use text. I also feel a bit lazy about logging into her hosting back end, so I accomplished the same thing by removing the default Avada logo from the global options, and using the function listed above but without designating a specific page for it to apply to.
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
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
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.
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’ )
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’
Look into hooks and filters. The logo defaults to the home page, but you can insert a logo using something here, https://theme-fusion.com/fb-doc/technical/fusion-builder-hooks-actions-filters/
Hi,
Did not get result…
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.
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 ………………………….
I would look at the functions.php file and study hooks and filters to change the header. There is a piece of code that adds material before the logo. https://theme-fusion.com/avada-doc/special-features/avada-hooks-actions-and-filters/ I’ve been using these a lot!
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!
Aye, that is a tough one – have you found any solutions?
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.
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?
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.
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
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.
Would you please provide a sample that uses the filter, apply_filters( ‘avada_secondary_header_content’, $secondary_content, $content_area, $content_to_display );,
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’;}
Thank you Rochelle, found this very useful!