How to change mobile menu breakpoint in Genesis Sample theme

If you’re building one of your first WordPress websites using Genesis framework, you may come to a point where you’ll theme needs to change mobile menu breakpoint – so desktop style menu could change to mobile menu on a different point than comparing to the default settings.

Here’s how to do it fairly easy – just in couple of minutes without any complex tools or deep programming knowledge.

This tutorial was built using Genesis Sample Version 3.2.0 theme, but it should also work if you use other late versions of this theme.

Changing mobile menu breakpoint in the Genesis Sample theme to any point

First thing you need to do is to open Genesis Sample theme’s style.css file. You can do it in any code editor, or you can open it directly from WordPress admin menu by opening Appearance >> Theme Editor.

Next step – create a media query with the specified breakup. Default breakpoint for the theme is 960 px. For this example we’ll use 1220px. So if browser window width is more than 1220px, theme will automatically switch to desktop style menu. Otherwise it will always show mobile menu.

Here’s the first part of the code that you shoud add to the end of style.css file:

@media only screen and (min-width: 1220px) {
	
}

The next step – locate this code in the same file (default lines in Genesis Sample v3.2.0 are between 1480 and 1548 lines):

/* Genesis Menu
	--------------------------------------------- */

	.genesis-nav-menu .menu-item {
		display: inline-block;
	}

	.genesis-nav-menu .menu-item:focus,
	.genesis-nav-menu .menu-item:hover {
		position: relative;
	}

	.genesis-nav-menu > .menu-bold > a {
		font-weight: 700;
	}

	.genesis-nav-menu > .menu-highlight > a {
		background-color: #333;
		border-radius: 3px;
		color: #fff;
		font-weight: 600;
		margin-left: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.genesis-nav-menu > .menu-highlight > a:focus,
	.genesis-nav-menu > .menu-highlight > a:hover {
		background-color: #0073e5;
	}

	.genesis-nav-menu .sub-menu,
	.genesis-nav-menu .sub-menu a {
		width: 180px;
	}

	.genesis-nav-menu .sub-menu {
		border-top: 1px solid #eee;
		opacity: 0;
		padding-left: 0;
		position: absolute;
		transition: opacity 0.4s ease-in-out;
	}

	.genesis-nav-menu .sub-menu a {
		border: 1px solid #eee;
		border-top: 0;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	.genesis-nav-menu .sub-menu .sub-menu {
		margin: -46px 0 0 179px;
	}

	/* Responsive Menu
	--------------------------------------------- */

	.genesis-responsive-menu {
		display: block;
		padding-top: 15px;
	}

	.menu-toggle,
	.sub-menu-toggle {
		display: none;
		visibility: hidden;
	}

Select all the code and cut it from it’s original place into the previously created media query, so final result should be something like this:

@media only screen and (min-width: 1220px) {

	/* Genesis Menu
	--------------------------------------------- */

	.genesis-nav-menu .menu-item {
		display: inline-block;
	}

	.genesis-nav-menu .menu-item:focus,
	.genesis-nav-menu .menu-item:hover {
		position: relative;
	}

	.genesis-nav-menu > .menu-bold > a {
		font-weight: 700;
	}

	.genesis-nav-menu > .menu-highlight > a {
		background-color: #333;
		border-radius: 3px;
		color: #fff;
		font-weight: 600;
		margin-left: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.genesis-nav-menu > .menu-highlight > a:focus,
	.genesis-nav-menu > .menu-highlight > a:hover {
		background-color: #0073e5;
	}

	.genesis-nav-menu .sub-menu,
	.genesis-nav-menu .sub-menu a {
		width: 180px;
	}

	.genesis-nav-menu .sub-menu {
		border-top: 1px solid #eee;
		opacity: 0;
		padding-left: 0;
		position: absolute;
		transition: opacity 0.4s ease-in-out;
	}

	.genesis-nav-menu .sub-menu a {
		border: 1px solid #eee;
		border-top: 0;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	.genesis-nav-menu .sub-menu .sub-menu {
		margin: -46px 0 0 179px;
	}

	/* Responsive Menu
	--------------------------------------------- */

	.genesis-responsive-menu {
		display: block;
		padding-top: 15px;
	}

	.menu-toggle,
	.sub-menu-toggle {
		display: none;
		visibility: hidden;
	}
}

One more thing – to make sure changes will be visible in the browser you may change theme’s Version number. It is located at the top of the same style.css file.

For example if you have a theme version 3.2.0., you may change it to 3.2.1. That will guarantee that browser won’t load old css file, and will check for any changes in the new version of file.

That’s it – your theme will load desktop menu only from the specified breakpoint, otherwise it will show mobile menu.


RELATED ARTICLES