Skip to content

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.

SEO-Ready

Being SEO-Ready in WordPress

SEO. Just hearing the acronym for search engine optimization can make the most web-savvy person cringe. There is so much conflicting, ill-advised, and out of date information out there that making good decisions can feel impossible. There are dozens of predatory companies, often contacting you through your own website’s contact form, offering to help get…
Read More
WP Engine

Purposeful Partnering

Pixel Jar has been a partner with WP Engine since 2010. In that time we’ve grown to rely on their services more and more for our clients. Here are some of our favorites reasons why. Why WP Engine Rocks WP Engine provides service oriented, managed WordPress hosting, but it’s their focus on providing an amazing…
Read More

How Can We Help You?

We want to build your next project.

Connect with Pixel Jar

Does Your Website Need a Tune Up?

Run a Multi-Point Inspection on your website now!

  • Check speed rankings
  • Test security vulnerabilities
  • Find site optimizations

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.
Partner

WPEngine

We are proud partners at WPEngine hosting.

Visit WPEngine  
Partner

Sucuri

We are proud partners at Sucuri website security.

Visit Sucuri  
4.9 of 5 Stars

Clutch Reviews

Our reputation is everything. We currently hold a 4.9 star review at Clutch.

See our Clutch profile  
5 of 5 Stars

Google Reviews

Read client reviews of our work on Google where we have a 5 of 5 star record.

See our Google Reviews  
Scroll To Top