Avada 5.06 - Creating a Custom Header - With Code

Is there an easy way to customize the Avada header? I don’t like any of the pre-built templates.

One of the most frustrating features of Avada theme is the limited ability to customize your header from Theme Options. While I believe that Avada is the greatest premium WordPress theme on the market, this is one area that I have repeatedly requested (unsuccessfully) some flexibility.

We recently took on a client that was adamant about header design, and none of the pre-designed templates were even close. This is made more difficult mainly because Avada is so responsive and mobile-friendly. All of the Avada header templates are designed to score 100/100 for Google’s Mobile Friendly Test, and you definitely do not want to break that functionality. After all, isn’t this one reason you bought the Avada theme?

My first instinct was to go back to the client and try to convince her that customizing the included Avada header templates could break her responsive. In the end, we came up with a simple solution that was so effective and elegant that it surprised me (and works perfectly across devices).

The client wanted her logo and a CTA banner at the top of the header, with the main menu and secondary menu below. The closest Avada header (V4) places the logo and banner area in the middle, with the secondary menu location at the top. Here is what we did.. First, here is the new code for the custom header.. (if you copy it, copy inside the “pre” tags).