Mobile Menu Trigger at 1200px

[3lias]

Hi, I would like to show the mobile menu at a resolution of 1200 px and lower. Where can I adjust this?

[David Martin – Support]

Hi,

Can I see a URL? The CSS will vary depending on your header setting.

Please see this thread: http://www.swiftideas.com/forums/topic/switch-desktop-menu-to-mobile-menu-earlier/

[3lias]

Hi David, unfortunately the site I am talking about is still on a staging server and not accessible from the internet but I could tell or give you the header information you’ll need. For now I can give you the source code from the main page.

[3lias]

This reply has been marked as private.

[David Martin – Support]

You can just tell me what header number you are using in Theme Options => Header Options.

[3lias]

I am using header layout 6 (header-6). This said the link you posted before was quite helpful as I could use the code from Kyle: http://www.swiftideas.com/forums/topic/switch-desktop-menu-to-mobile-menu-earlier/#post-64003

The only problem is that for some reason at a resolution of 1024 x 768 px (landscape) the mobile menu is not visible. If I turn the view to 768 x 1024 px the menu shows up again. Very strange. I have checked this with Firebug and an iPad and get the same weird result.

I think there is some setting missing as for the original dante theme (http://dante.swiftideas.com/) the mobile view with the resolution mentioned above only shows at 768 x 1024 px.

Any idea how to fix this?

[David Martin – Support]

What is your URL @3lias?

[3lias]

The website is still on a staging server and can’t be accessed via internet at the moment. :/

[David Martin – Support]

If you can setup a staging server it will be of great for us to help you quicker.

Thanks.

[3lias]

Not sure but maybe it has something to do with the class .visible-sm and .visible-xs. Because I searched in the Dante folder for “.visible-” and found out that there are more of this class declarations, like visible-lg and .visible-md. The only problem is I have no idea what they used for. Maybe you know?

[David Martin – Support]

Those are visible for small or medium screens. Use the Chrome inspector to see what CSS and classes are used on the element.

Thanks.

[3lias]

I think I’ve found the “problem”. In the Dante responsive.css file is on line 128 following code:

@media only screen and (min-width: 992px) {
	.mobile-menu-open #container {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	#mobile-menu-wrap {
		visibility: hidden;
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-transition: none;
		transition: none;
		-webkit-transform: none;
		transform: none;
		display: none;
	}
}

As I want to show to mobile menu over 992px I have to add the #mobile-menu-wrap to my piece of code:

@media only screen and (max-width: 1210px) {

	.header-6 #logo {
		width: 100%;
		padding: 0 15px;
		top: 0px;
		left: 0;
		height: auto;
		position: relative;
	}
	
	#logo a {
		float: left;
	}

	#logo img, #logo img.retina {
		width: auto !important;
		min-height: 60px;
	}		
		
	#main-navigation {
		display: none;
	}
		
	nav.search-nav {
			display: none;
	}
		
	.visible-sm.visible-xs.mobile-menu-show {
		display: block!important;
	}
	#mobile-menu-wrap {
		visibility: visible;
		display: block;
	}
	
}

But I think also add the code from the responsive.ss in a modified way:

@media only screen and (min-width: 1211px) {
	#mobile-menu-wrap {
		visibility: hidden;
		display: none;
	}
}

Does this makes sense? At least the mobile menu is showing as intended. 😀

[Rui Guerreiro – SUPPORT]

Well, if it’s working as expected then it should be fine 🙂

-Rui

[3lias]

OK. Thanks for your help.

This issue is resolved and can be closed 🙂

[David Martin – Support]

Marking as resolved.

Thanks.