Header size increases instead of collapsing menu

Hi f.lindenberg,

You should be able to change the CSS for the menu in your child theme so that the ‘collapsed’ burger menu will appear for all sizes.

Without a link to your site, I’m not able to suggest what the code should be. Have a look for a media query at 768px.

Hope that helps.

Drew

Thanks, Drew, for your prompt reply.

Unfortunately, the site is running locally so I cannot provide you with a link.

So, let me check if I understand you correctly:
I would write my own media query for sizes > 768px and < 990px. In this query, I’d copy paste all the css rules that relate to the burger menu and that you are using in your existing media query for < 768px?

This approach seems to be a hassle to maintain in future, doesn’t it? Suppose you change the burger menu in an upcoming update, I’d have to remember to copy & paste the new rules into my own media query, again. Right?

Or maybe I’ve misunderstood you in the first place ??

Yes f.lindenberg, spot on.
Although it sounds a pain, you’ll find in practice that the menu styles aren’t likely to be updated that often. Only when you notice a change between your mobile and desktop menus would i go back and re-copy the styles.

Hi Drew,

I’ve tried following your suggestion, but haven’t had any success, yet.

This is the part I’ve copied from the media query (max-width: 767px). I created my own media query (min-width: 768px) and (max-width: 991px) and pasted it there.

/* HEADER */
	.bs-navbar-collapse {
		border: 0;
	}
	#main-nav {
		overflow: visible;
	}
	#main-nav,
	#main-nav.fixed {
		position: relative;
	}
	.navbar-inverse .navbar-nav {
		padding-left: 10px;
		line-height: normal;
		text-align: center;
	}
	.navbar-inverse .navbar-nav>li {
		display: inline-block;
		margin-bottom: 0;
	}
	.navbar-inverse .navbar-nav > li {
		width: 100%;
		border-bottom: 1px solid #EDEDED;
		position: relative;
		margin: 8px 0 0 0;
		padding: 0 0 8px 0;
	}
	.navbar-inverse .navbar-nav > li  a {
		text-align: left;
	}
	.navbar-inverse .navbar-nav ul.sub-menu {
		display: none !important;
		position: relative;
		top: 0;
		box-shadow: none;
		width: 100%;
	}
	.navbar-inverse .navbar-nav li.this-open > ul {
		display: block !important;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li {
		width: 100%;
		float: left;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li a {
		width: 100%;
		float: left;
		padding: 8px 25px 8px 0;
		border-bottom: 1px solid #EDEDED;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
		border-bottom: none;
	}
	.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu {
		position: relative;
		left: 0;
		top: 0;
	}
	#main-nav {
		overflow: hidden;
	}
	#main-nav,
	#main-nav.fixed {
		position: relative;
	}
	.navbar-collapse {
		max-height: 100%;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li {
		padding-left: 20px;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li {
		padding-bottom: 0;
		padding-top: 0;
	}
	.dropdownmenu {
		display: block;
		position: absolute;
		z-index: 9;
		right: 0;
		top: 5px;
		width: 25px;
		height: 25px;
		margin: 0;
		padding: 0;
		border-radius: 3px;
		background: url(images/menu-icon.png) center center no-repeat #e96656;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li{
		margin-right: 0;
		padding-right: 0;
	}
	.navbar-inverse .navbar-nav > li > a:hover {
		color: #404040 !important;
	}
	.this-open > a {
		color: #e96656 !important;
	}

The regular menu is indeed replaced. However, the toggle button is not being displayed and instead the menu items are shown as if I had already clicked on the toggle button and expanded the menu. Also there are some additional, minor differences.

Do you have any ideas what I did wrong? Did I miss something while copying? Is my media query overwritten by something else?

Any tip is welcome ??

Hmm,
That does sound odd.

Have you tried just changing the (max-width: 767px) query to read (max-width: 991px)? IF that works then it might suggest something was missing from the copy.

Drew