Mobile Header Breakpoint

Applies to: Jump Start 2.2+, Denali 1.1+

In this tutorial, we’ll discuss how to customize the breakpoint where the mobile header displays and the desktop header is hidden.

Note: For those using Jump Start 2.2+, this tutorial only applies to those using the Developer theme base. If you’re using any other theme base, there’s a user option to adjust this at Appearance > Theme Options > Styles > Mobile Header.

The Setup

Whether you’re using Jump Start or Denali, the default mobile header breakpoint is 991px. This means that users will see the desktop header any time their browser window (i.e. viewport) is larger than 991px. And if the user is at 991px and below, they’ll see the mobile header.

But why would we ever want to change this? Well, everyone is going to have different desktop headers. You may have a really big main menu or you’ve added other elements to the header via other customizations. And as the viewport becomes smaller, this desktop header may start to look a bit cramped.

So maybe instead of trying to make adjustments, you’d rather just flip in the mobile header at a wider viewport.

In this tutorial’s example, we’ll change that breakpoint to 1199px, so that our desktop header only shows for users with a 1200+ viewport.

The Code

First, you need to make the CSS adjustments. Add the following to your child theme’s style.css.

#top,
.tb-mobile-header {
	display: none;
}
@media (min-width: 1200px) {
	#top {
		display: block;
	}
}
@media (max-width: 1199px) {
	.tb-mobile-header {
		display: block;
	}
}

And next, we’ll need to filter in our new breakpoint to accommodate other JavaScript-related features like displaying the mobile side menu and handling the sticky header. So add the following to your child theme’s functions.php.

/**
 * Adjust the framework breakpoint from 991px
 * to 1199px.
 */
function my_mobile_header_breakpoint() {
	return 1199;
}
add_filter( 'themeblvd_mobile_header_breakpoint', 'my_mobile_header_breakpoint' );