Articles Blog

Beaver Builder Responsive Headers

Beaver Builder Responsive Headers


Sometimes elements of your website will
not break down the way that you hope they do in a responsive setting so let’s
say for example the header in this site is not breaking down the way that we want for desktop
tablet and mobile with beaver themer we can actually build out headers just for
those particular breakpoints here’s how first you’ll want to go into the Themer
layout section click add new we’ll call this a header general the type will be
themer layout and the layout is going to be a header element not a footer or
any of the other options there once we create that page we get to the settings
do we want the header to be sticky which means when you scroll up it’ll stay I’m
going to choose no on this option or do you want an overlay option you could
even specify which location this header will show up in so maybe it’s only in an
archive section or just on particular pages we’re going to choose entire site and
we’re also going to choose all users now we can launch the beaver builder tools
to build out our headers so you see it will start me with default header row
what we’re going to do is we’re going to add two more rows here and here now the trick to making
them responsive is to go into the row settings click on advanced and under
display but we’ll make this the desktop row and we’ll say for large devices only
save that for the second row we’ll make that one medium devices only and for the
third row small devices only so when this header element displays on a web page if it’s a desktop it’ll show this top one if it’s tablet it will show
the middle one and if it’s mobile this one on the bottom so now let’s
quickly build out header elements for each of those breakpoints okay what we’ve done is this blue header
we’ve said to show on desktop as well as this top header with the phone number
and the social links those will both show only on large devices this red band
will show on tablet and the yellow band will show only on mobile devices
acknowledging this is a hideous design because you would never actually build a
site like this but just to very well demonstrate when we’re switching from
one look to another so what we’ll do is we’ll publish this and once we publish
it it goes back to its desktop setting what you can see here but if I was to
switch it to tablet you’ll see it went to the red so now we’re just doing the
abbreviated name the phone number and the hamburger menu and if we go to phone we’ll get the yellow band that’s the abbreviated header and just the
hamburger menu with no phone number anymore so just by using the responsive
settings you can create very robust display issues

Leave a Reply

Your email address will not be published. Required fields are marked *