Different Menu on iPad

[fikasem]

Hey,

Just noticed tonight that the top nav menu is different on iPad view. It appear as open, looks different than the other screen sizes, and you can’t close it all. Not sure when that happened but would really appreciate some help.

Website: http://www.parronhall.com/

Thanks,
Ann

[rad]

Hi @fikasem,

Thanks for reaching out.

It’s because of this CSS,

@media (max-width: 1190px) {
.x-nav-wrap.mobile {
    display: block;
}
}

Please remove that, or simply hide it with this CSS.

.x-nav-wrap.mobile {
    display: none !important;
}

That’s your original mobile menu and looks like you’re using SF for mobile. Did you intend to hide it or display it (due to above CSS).

Thanks!

[fikasem]

Yeah, when we initially created the site we did that with the SF menu, which should be the only menu. I can’t find the CSS you’re referring to and it doesn’t seem to work to hide it either

[ruenel]

Hello Ann,

Please check your Theme Options custom css or in the Cornerstone page’s custom css. This is the entire css block:

@media (max-width:1190px){
	.masthead-inline .x-btn-navbar{
		display:block;
		float:right;
	}

	.x-nav-wrap.desktop{
		display:none;
	}

	.x-nav-wrap.mobile{
		display:block;
	}

	.x-nav-wrap.mobile.collapse{
		display:none;
	}

	.x-nav-wrap.mobile.collapse.in{
		display:block !important;
	}
}

Hope this helps.

[fikasem]

Okay, got it, thanks so much! Now the menu is showing at the wrong width, making the text pushed down to a second row below. Can that be changed too?

[thai]

Hi There,

Please update the previous CSS to this:

@media (max-width:1190px){
	.masthead-inline .x-btn-navbar{
		display:block;
		float:right;
		font-size: 36px;
	}

	.x-nav-wrap.desktop{
		display:none;
	}

	.x-nav-wrap.mobile{
		display:block;
	}

	.x-nav-wrap.mobile.x-collapsed{
		display:none;
	}

	.x-nav-wrap.mobile.collapse.in{
		display:block !important;
	}
}

Hope it helps

[fikasem]

Ahhhh thank you!! Now it is working

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!