Beaver Builder Responsive Headers

Beaver Builder responsive headers

Creating custom responsive behaviors with Beaver Builder is a snap. In this post, we’re going to look at Beaver Builder responsive headers and a good method for managing content between breakpoints.

Beaver Themer is the Key to a Responsive Header

Beaver Builder is a powerful tool and you’re able to create a lot of flexible builds. However, certain elements require functionality that is only available within Beaver Themer. Beaver Themer is an add-on for Beaver Builder that allows you to apply the same modular building features to theme features in addition to the content. 

So, with Beaver Themer you’ll create a new themer layout in the dashboard and choose a new header element. Be sure to give the new layout a distinguishable name. Once the layout is created you’ll want to apply some settings to the new layout. You can make the header sticky or set it to be an overlay. You can also choose which pages or sections of the site the new header will be active. Finally, you can choose what types of users can see this new header.

Building Out the Responsive Headers

Once the settings are in place you can launch the Beaver Builder tools to start creating the header. When the tool is launched you’ll see a default header row created for the layout. Assuming we’re creating some default styling for desktop, tablet, and mobile breakpoints you’ll create two additional rows. As a quick way to get started, you could duplicate the existing row for the two new rows. 

You’ll want to assign each of these rows to a specific breakpoint. Select the original row and choose the Advanced tab under the row settings. Under the Responsive Setting section change the display of the first row to “large devices only.” Then repeat this process for the other two rows setting them to “medium devices only,” and “small devices only” respectively. Now when the header is viewed in the respective devices sizes the appropriate row is displayed.


Recorded with Beaver Builder version 1.8 and WordPress 4.9.6

Styling for Responsive

Now that you have rows for each of the different breakpoints you can use a combination of Beaver Builder’s visualization tools, modules, and your browser’s development tools to style each row appropriately. Some things to consider are the menu, type sizes, padding, and line breaks. You can always come back and adjust this layout for any of the breakpoints.

Beaver Builder along with Beaver Themer put control over responsive elements firmly in your hands. By adjusting the design using a WYSIWYG editor you reduce the back and forth of media queries and can dial in very specific layouts. If you have any trouble creating responsive layouts on your Beaver Builder powered site, give us a holler.

Written by the Team at Pixel Jar

We hope you got something useful out of that post. If you'd like to read more we have an active blog with topics across the spectrum of website development. If you're researching information for a project we'd love to talk to you about it.

membership migration for the PMA website

Membership Migration for the PMA

Migrating memberships is one of the most frequent requests we get for organizations with members. Often, a team is handling membership in one way, sometimes with a spreadsheet or a CRM service, and is ready for some more sophisticated tools. Or, a previous website solution isn’t providing the needed features and it’s time to expand.…
Read More
The Most Common Conversion Mistakes Part 1

The Most Common Conversion Mistakes – Part 1

Joe had a problem: His lead generation website wasn’t generating very many leads. When a website expert took a look, it was easy to see why not. His site included more than half of the most common website conversion mistakes! To maximize your website conversion (i.e. the percentage of website visitors who actually take the…
Read More

Learn how to understand your website's strengths and weaknesses, and how to make changes for the best possible chance at success.

Download Now

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Our Community

Subscribe to learn more about the goings on at Pixel Jar.

  • Note: Your email will be added to our CRM and be used to receive emails from Pixel Jar. You can unsubscribe at any time.

  • This field is for validation purposes and should be left unchanged.