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.

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.