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.

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.

Leave a Comment