Creating Responsive Headers
CREATING RESPONSIVE HEADERS WITH BB
For use with Beaver Themer and plugins like J7 Digital’s Header/Footer Templates (for the BB Theme) and Beaver Builder Header Footer.
You can also disable the theme’s header and use Beaver Builder (but this will not include the proper HTML & Schema.org mark-up).
You can also manually add using the BB shortcode added to a hookable area of a themes header (see knowledge base)
HEADER TEMPLATE 01
Two columns. Left: 100% for medium devices 50% for small. Right: 80% for medium devices 50% for small.
Logo Photo Module – aligned centre. Menu Module – aligned right (height set in the right column).
HEADER TEMPLATE 02
Two columns. Left: 100% for medium devices 50% for small. Right: 80% for medium devices 50% for small.
Logo Photo Module – aligned centre. Menu Module – aligned right (height set in the right column).
Telephone number: Text module added with a column within a column (right) with responsive layout set to large devices only
Tel: 01234-567-890
HEADER TEMPLATE 03
The same as Header Template 02, but this introduces an empty column to push the centred logo to the left on medium devices only.
HEADER TEMPLATE 04
Two header created with 4 columns in a row (could have been 2 row) The left and Right top columns set to responsive layout Large only. The other two set to medium and small devices only. Extra CSS added to style the hamburger icon (see below).
Note: Above is the header for desktops. Below is for tablet and mobiles.
HEADER TEMPLATE 05
Same as Header Template 04, but with menu button instead of hamburger.
Extra CSS added to style the button text to look button like.
Note: Above is the header for desktops. Below is for tablet and mobiles.
SOME CUSTOM CSS ADDED HERE
/*Changes hamburger icon – if custom selector “hamburger-colour” is added to Menu Module class area */
.hamburger-colour .fl-menu-mobile-toggle.hamburger
{
background-color: #202020;
padding: 12px;
color: #FFFFFF;
/*+border-radius: 50px;*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
border-radius: 50px;
}
/*Changes the button text – if custom selector “button-colour” is added to Menu Module class area */
.button-colour .fl-menu-mobile-toggle-label
{
background-color: #202020;
color: #FFFFFF;
padding: 10px 15px;
}
/*This positions the drop-down menu items */
.fl-menu-accordion-collapse A
{
text-align: center;
}