Activate mobile menu earlier

Hello.
How can I set the max-width to activate the mobile menu in custom css? Because my header with 7 page title look like a mess in 2 line.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the mobile menu in the Desktop header and then try adding the following Custom CSS under Theme Settings.

@media (min-width: 1100px) {
.whb-header    .whb-mobile-nav-icon {
   	 display: block;
    }
}

@media (max-width: 1100px) {
.whb-header    .main-nav {
   	 display: none;
    }
}

You can set the width according to your needs.

Best Regards.

Added, but its always showing. And also the desktop header should be hidden if the mobile appear.

Hello,

The CSS I provided you with will display the mobile menu on the devices whose width is 1100px.

You can try setting the width according to your needs in the CSS that I provided you with and then add it to Theme Settings >> Custom CSS.

Then clear the cache and check back.

Regard’s.
Xtemos Studios.

I did it but still the same.. mobile menu showing next to desktop menu.

Attachments:

You must be logged in to view attached files.

Hello,

I have logged into your website.

You added the CSS for device width 750px and it’s working fine. Please clear the cache and check back.

Screenshot for Clarification: https://ibb.co/F5dRWV2

And have also hidden the mobile menu that was displayed on the desktop version. Please clear the cache and check back.

I am sorry but this is not the standard way of testing the site, every Theme in the world uses certain breakpoints to change the layout as per the screen resolution, and Woodmart also based on that theory, Woodmart uses the Bootstrap framework which works on certain predefined rules for the different layouts on different screen resolutions, like for Desktop ( start from 1025px), For Tablets ( from 992px to 1024px) For Mobile. ( end till 1023px) these are the standard points.

So if you test the site like you are doing simply resizing the browser then on a certain point/screen resolution it must break the layout.

You must have to test your site on the real devices OR on the online simulator like Responsinator: https://www.responsinator.com/?url=https%3A%2F%2Fteszt2.eautotoltokabel.hu

Best Regards.

Hello.

Sorry but its not enough solution for me, because if someone checking my website from Desktop without full-screen view, he will see a mess in my header… So what can I do more? In Impreza theme there is an option where can I set that what is the maximum window size to change for mobile header.

Attachments:

You must be logged in to view attached files.

Try to use the following CSS to switch to mobile header starting from 1100 px screen

@media (max-width: 1100px) {
  .whb-header .whb-hidden-desktop,
  .whb-header .whb-hidden-lg {
	  display: flex;
  }
  .whb-header .whb-hidden-mobile,
  .whb-header .whb-visible-lg {
    display: none;
  }
}

I tried it but its not working 🙁

You have changed the value to 800px. We have returned 1100px and now your header becomes to look like a mobile version from 1100px and smaller screens https://prnt.sc/uwlhyi

Dear Support,
It’s still not solve my problem. I want that to my header to be totally responsive for any device. And if someone check it from Desktop with not full screen its not responsive and in sticky header cannot see the menu points at all.
The other problem is that in Desktop its showing the mobile menu also.
Screenshot attached for clarification.

Attachments:

You must be logged in to view attached files.

Do you mean that you always want to show the mobile version of the header?
We don’t understand how do you want to solve your problem.

Not always. If the menu points can show up in one line the customers should see the Desktop menu. But when its go to 2 lines, like in the photo than it should just show the mobile menu. I think a responsive header should work like this.

But it is not possible with CSS to get the point when your menu goes to the second line. It may have a different number of items. That is why you need to test this point manually and change the code we provided from 1100px to the exact value you need. And then your header will become mobile exactly when you want. There is no other solution to this and all other themes behave the same.

Sorry, it was a cache problem. Your last code is working fine with 1290!

Thank you !!

Great. Contact us if you will have any extra questions.

Sorry, I checked with sticky header and for that its not enough :/ can you please help to work with sticky header also?

Hi,

Try to replace previous custom code with the following one:

@media (max-width: 1290px) {
  .whb-hidden-desktop,
  .whb-hidden-lg {
	display: flex;
  }
  
  .whb-hidden-mobile,
  .whb-visible-lg {
    display: none;
  }
}

Regards

thanks, worked

Great, you are welcome.

[Author]

Posts