Keep Beaver Themer Sticky Header on Mobile & Tablet

By default the Beaver Themer Sticky Header Option only sticks to the head for large devices only and disappears at tablet and mobile size – this makes for better UX but when the sticky header is minimal it can be useful at all sizes, heres how you can do it.

Make sure the row that the header is in is set for all devices

Add in the below CSS…

/* Allow Sticky Header */
@media (max-width:991px) {
	header[data-type="header"]{
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 100;
	}


	.admin-bar header[data-type="header"] {
		top: 32px;
	}
}

So the the default media query that Beaver Builder uses 991px is used to show the header at that media query and lower – change this if you use a different size – I use 1024px. The second CSS rule just allows for the WP Admin dashboard header strip.

Another good practice is if the sticky header is just an icon row or a CTA such as a number you can set the rest of the header menu, logo etc as a Beaver Themer part and position that part after the header.

To change the default behavior of the Themer javascript of shrink and stick effects so it can appear at any viewport – see the js post.