Avada header alterations: another look

I just updated a site from 3-something to 5.7.2, the latest update to the Avada theme. I’ve been updating everyone to make sure that all is compatible with Gutenberg, WordPress.org’s latest assault on developers everywhere. It’s not enough to tell us that we shouldn’t be editing the child theme, and then displaying nastygrams mid-editing when we simply haven’t yet closed a tag – they want us to learn a new builder, new technology, new interface, most likely to be competitive with trash such as Wix and Weebly. (Why, WordPress, Why?) Yet I digress. The updated version of Avada simply ignores such nonsense and you can continue to edit with the fabulous Fusion Builder even on WordPress version 5.0.1 (as long as your server/host can handle it.)

The earlier themes were easier to manipulate with just a few header theme files which were named pretty much in line with the order of the header style you chose in the theme. This particular site had the modification of wanting the tagline to appear BELOW the menu rather than above it, as you would select in header version 4. In the 3.x version, I had entered the tagline information but then used header 3, moving the bit of php code that would generate a tagline to the header version 3 template. Easy-peasy. This time, I did a similar approach, but it took a bit more trial and error; staying with the version 4 header in theme options.

Naturally I tried using a hook/filter to add content after the logo. But the positioning would not work – could not center the text below the menu to save my life. Adding it after the menu via css kinda worked, but content calls in css don’t style very easily, and certainly don’t break the line where you might want it to (no html allowed in the content code). Also it became part of the menu, which was problematic for sticky headers and mobile devices.

I ended up deleting the menu code from the file ‘header-secondary-main-menu.php’ but keeping it in my clipboard. This is a new file since 3.x, and it doesn’t have much in it. Deleting the php code to show the menu pretty much deletes everything except the ‘don’t access this directly’ statement. But unless you want two menus, it’s gotta go. (And why is it named ‘secondary’? This is displaying the main menu. THE MAIN MENU. There is nothing ‘secondary’ about it. Must be legacy from version 1.0 – too much work to change? who knows.) I then pasted the menu php code into “header-content-3.php”, making sure to move the closing menu divs below all that other if/then stuff so it remains part of the navigation area. (The other option is to leave the div tags, and remove the flex attributes in the menu css, but I figured they might be there for a good reason.) The oddest thing about this is you would THINK that I should be editing header-v-4.php, but no! That file does not contain the magic you need.
(Don’t copy this code as the WP editor has trashed it to protect this page. Copy it from your theme install.)

<div class="fusion-header-content-3-wrapper">
<div class="fusion-secondary-main-menu"><!-- row removed here -->
<?php avada_main_menu(); ?>
<?php avada_mobile_menu_search(); ?><!-- end row removed -->
<?php if ( 'Tagline' === $header_content_3 ) : ?>
<h3 class="fusion-header-tagline"><?php echo do_shortcode( Avada()->settings->get( 'header_tagline' ) ); ?></h3>

Another trick I use to make sure I’m editing the correct file is to add a style to the divs in the php file, then see if the page I’m on is using it. If not, then I know I’m editing the wrong file.

Now there was a little issue with the sticky menu – it was showing the tagline. I managed to hide it with css. At this point I was editing the child theme css via the control panel/ file manager/ code editor to get around the red warnings screaming at me every time I started typing.

Also make sure you have a backup of any php files you mess with. White screens of death are really no fun. Using a file manager via the control panel to edit is great because you can just ‘undo’ (cmd/control z) any change you made as long as the screen is open. Editing the files via WordPress can just get you in trouble. Plus, make sure to copy these template file changes into your child theme’s template folder (you’ll have to create a ‘templates’ folder.) As long as you spelled “templates” correctly, and set your child theme to be the active theme, Avada will use these files to override its own. This is extremely important if you plan to keep your theme up to date. Of course at some point in the future, they won’t work any more because the developers of Avada will come out with some other new way to display the header and you’ll have to tweak your code again. (#why-I-hate-advanced-custom-fields #just-you-try-and-update-that-theme)

The site? https://gateway-controls.com. It’s looked the same since I built it in Pagelines several years ago. Oooooh remember when Pagelines was a shiny new thing?? Before they went all subscription on us?? Kinda wonder how they’re doing with that business model…

By |2018-12-13T07:36:23+00:00December 13th, 2018|Uncategorized|

Leave A Comment

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