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.

web design inspiration

Where Do You Go for Web Design Inspiration?

Web design and web development are two halves of a successful site. We often have clients that are uninspired by the appearance of their site. If these projects don’t include a custom design solution, clients often struggle with web design inspiration. We have a few tools that we rely on to break through this “designer’s…
Read More
Knowing Which Events To Track

Knowing Which Events To Track and Avoiding Data Overload

Google Analytics tracks an incredible amount of data. While a wealth of information can be great, it can also be overwhelming. So how can you sift through the data to find what you need to make informed decision to improve your website’s user experience? Be judicious about Event tracking. Determine Which Events to Track It…
Read More
how-to-perform-a-website-audit_sidebar

Maximize your website's appeal and keep everything working for the best conversions.

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.