Frustrated with your mobile headers turning out wonky and not knowing how to fix them? We get you. We struggled with that many times ourselves until we learned about the amazing tool that is Beaver Builder’s responsive editor.
This responsive editor is a godsend when editing your websites for other device sizes, as it changes the size of the display area directly in the editor so you can see how rows and columns wrap without needing to toggle back and forth to the full preview mode. It also allows you to change a number of settings (like margins) to be unique to each breakpoint, so if you need to change margins on your mobile breakpoint, it won’t affect the margins on your desktop breakpoint.
Today, we’re going to focus on how you can use this tool for making responsive headers and show you how to make your headers wrap the way you want them to. Let’s get started!
Step 1) Open your header in Beaver Builder
Step 2) Open the responsive editor
There two main ways to open the responsive editor. The first way is to click on the Beaver Builder dropdown settings and select “responsive editing.”
The second way is to click on any module and go to the advanced settings tab. Do you see the small computer icon right above the margins field? While it may not seem like a button, you can actually click this to open the responsive editing mode. (There are several other places in the module settings where you’ll see this icon and all of them open the responsive editor, I just find this one the easiest to get to since it’s the same in every module).
Step 3) Choose your breakpoint
When the editor first opens, it will be set to the “large” breakpoint. Keep clicking the icon, which has changed to a laptop now, or use the dropdown settings at the top of the screen to choose your breakpoint. You can also freely change the display size as you need, but we’re going to stick with the standard sizes.
Step 4) Change column widths to affect how modules wrap/stack
I decided to start with our mobile header for this client. As you can see, it really is not wrapping the way I’d like it to. I want to have them all stack vertically.
So I’m going to change the column widths. This is one of the features that you’re allowed to change for each breakpoint. (Anything that has one of the breakpoint icons by it is able to be changed individually for each breakpoint.)
If you’d like them to all stack vertically, like me, go into the column settings and change each column to 100% width. If you’d like to have two columns next to each other on the same line, set each of those two columns to 49%. If you do 50% on each one, or the total columns all add up to 100%, it can sometimes make the last column bounce to the next line. So, I tend to adjust column widths so that the combined percentage of all the columns is just slightly under 100%. (So, for 3 columns, which is the max on mobile, that would be 32% per column.)
ALSO NOTE: You CANNOT move columns around on a single breakpoint. Moving one column will affect EVERY breakpoint. So if you want to change the order of columns on your mobile header, you’ll likely have to create a separate header.
Step 5) Adjust alignment, size, and margins until you achieve the look you want
From here, the hard part is done! Now you can just tweak the styling and margins until everything is aligned. Again, anything that has a breakpoint icon by it is able to be modified by breakpoint.
For the main logo, I aligned it to center, then made it a little larger, and made the RVSA logo a little smaller as well. Then I also changed the font size and icon size on the phone number module, and the font size and button padding on the “Call Now” button.
NOTE: Don’t be afraid to edit global modules. They can still be edited by breakpoint like regular modules, and then the changes are applied to all your other global modules as usual.
In the end, this is what mine looked like:
Which leads me to step #6–
Step 6) Double check everything: go back and check your other breakpoints after making edits and check your header on a real device
This is very, very important! Sometimes, we accidentally make changes in fields that are actually applied to all breakpoints, and it messes up your other headers. Also, if you go back and change anything on your larger breakpoints after editing the smaller breakpoints, it could mess with your other headers.
By default, all the settings from the larger breakpoints are inherited by the smaller breakpoints (when you make changes to the smaller breakpoints, you’re essentially overriding those settings). So, for example, if there are fields you didn’t change while editing your medium breakpoint and then go back and edit your largest breakpoint, it will automatically apply those changes to the medium breakpoint and potentially mess up your work. So check, check, and double check after you make changes on any breakpoint!
TIP: One way to avoid this is making sure you manually input in all your settings, even if you’re still keeping the inherited numbers (especially with margins). That way you’re manually overriding the system and locking in your edits, so you don’t have to worry as much about messing up your other breakpoints. (But still make sure to double check everything before you publish!)
Also, make sure to check your mobile headers on a real device. I find some things are very hard to notice in the editor. Sometimes, I’ve had things look completely centered and fine in the editor, only to realize they’re actually skewed when I check them on my phone. Seeing it on the screen where it’s meant to be will really help you get adjustments and proportions right. For tablets, if you don’t have one, just adjust your internet browser window to be about tablet size – everything will automatically readjust, and you’ll see the different breakpoint settings “jump” once you reach the right size.
Step 7) What do I do if my header brakes?
This is an issue we’ve regularly encountered with Beaver Builder. Oftentimes, even the smallest changes can make our headers break, and we won’t see the broken header until we go to the homepage:
We’re not sure exactly where the glitch comes from, but we’ve found a quick way to fix the problem when it pops up. First, clear the Beaver Builder cache, which you can sometimes do from the dropdown in the menu at the top of your screen:
Or you can find it in the Beaver Builder settings. From your dashboard, click Settings > Beaver Builder. Then in the list of settings on that page, click tools, and then hit “clear cache.” After that, go back to the homepage, and do a hard refresh. If you’re on a Mac, you can do this by pressing “command + shift + r” at the same time. Or, if you’re on a PC, press control and hit the reload button, or press control and F5 at the same time.
Once the page refreshes, it should be back to normal!
Once you do your double checks, your responsive header is good to go! We hope this helps you create better headers and take some of the frustration out of the responsive editing process. Happy web building!
Looking for more website tips? Read more articles in our Website Tips Series below:
Best Practices for Business Website Images (4 Tips for Optimizing Your Photos)