Min./Max. Width, switching width for mobile design

[Winfried Hermann]

Hello there Bill,

It’s me once more.

My second question is regarding the “point” to switch from “normal” site display to responsive (mobile).

The website (see attached URL, just an example page) I created with elite is great and well designed and looks very good on a PC screen (1920×1080 and other usual resolutions).
When I scale the site down to tablet formats I have the issue that the switch to mobile design is occurring “too late”.
Currently it happens when I scale the width below approx. 780 px.

But in the meantime the design is mixed up – the top navigation is opening a second row (even a third one WITH the logo), and the title and map in the sidebar get reaching out of the page on the right.
After switching to mobile design all is looking well.

I would like to “change” the “point of switching” from approx 780 px to 1200 px, where the “normal” design still looks well at the last.

Is there any opportunity to do this?
If yes, where do I find the code to do this (and add it to the child theme) and what do I need to change there then?

Thank you very much in advance for your reply and assistance.

Warmest regards
Winfried

[Bill Robbins]

Hello Winfried,

Very good point. When there are longer navigation menus we do often need to change the sizes where changes take place.

What I would suggest is below 1200px in width we make the font size of the menu smaller and then switch to the mobile menu at 1024px. You can add this to your child theme’s style.css file or the Custom CSS in the theme options page to make that happen:

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

	#header nav#top-menu li {
		font-size: 16px;
	}

}

@media only screen and (max-width: 1024px) {
	
	#primary-menu {
		display: none;
	}
	
	.slicknav_menu {
		display: block;
		right: 0;
		top: 10px;
	}
	
}

In the quick test I did that appeared to keep everything on one line, but feel free to adjust those values to make it work best for you. If you run into any trouble, let me know.

Have a great day,
Bill

[Winfried Hermann]

Hello there Bill,

Again:
Thank you very much!
That works exactly as I need it.
I love the theme!

Warmest regards
Winfried

[Bill Robbins]

Good Morning Winfried

That’s fantastic. If you need anything else, just let me know.

Take care,
Bill

[Author]

Posts