Docs

[adubs777]

How can I set the mobile menu icon to display under a width that works better for my menu? Now it is pushing my full menu below the header logo and covering page content. Is there a way to set the responsive width change from full menu to the mobile menu so that it allows the full menu to fit in row or if the window/screen is not wide enough it changes to the menu drop down icon?

what would be the css needing to be set to change that from what it currently is to anything below 1042px width OR – it’d be more ideal to have that set to some automatic change based on how the full menu width is automatically.

Maybe you can see for yourself when shrinking the width of the window it drops the menu below the logo at about 1050px or so. and it is always like that on an iPad of certain size.

wishcandle.com

hope that makes sense. thanks.
ps/ I thought I posted about this last night but can’t find my post anywhere – maybe didn’t click “submit”.

[Rupok]

Hi there,

Thanks for writing in! Mobile menu will be triggered if the screen size is less than 980px. Let’s keep this as is. I am providing you some CSS to keep the menu consistent for the screen size 980px to 1030 where the menu is breaking to new line.

You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px) and (max-width: 1030px) {
.x-navbar .x-container.max.width {
  width: 95%;
}
}

Hope this helps.

[adubs777]

not sure what that did but looked like it pushes the logo more left when it gets to 1030px (tried changing that to 1050px but didn’t help) and then at about 990-930px it still drops the full menu below the logo. like the screen shots show.

Is there a way to make this set to something like and automatic change based on how wide the full or (mobile) the menu needs to be in relation to the window size?

wishcandle.com

[Joao]

Hi There,

Have you already found a solution?

Upon checking your website and re-sizing the browser multiple times your navbar seems to be aligned with your logo all the time.

Let us know,

Joao

[adubs777]

I haven’t yet found a solution. and as you can see from my screen shots the problem is still occurring at certain widths. Can you say why it is doing what it’s doing based on those screen shots. You have yet to acknowledge those.

I wonder why it would drop the menu items below the logo making the header double its height on an iPad ‘portrait’ view. Do you suggest still playing with the width in the code you last posted?

[Joao]

Hi There,

On my end your menu is not breaking into a second line like on your screenshots.

Would you mind clearing your browser cache and testing it again?

Thanks,

Joao

[adubs777]

ok I did that before sending you the screen shots but I’ll give it a try again…

[adubs777]

still doing it as these screen shots show again…

[Friech]

Hi There,

I am another support and your menu display fine on my end even on a 980px screen.

Perhaps try to view the page on an incognito mode browser. Or use another browser.

Thanks.

[adubs777]

That’s nice that it works for you and it’s not a matter of dispute that it’s not the same for me and other people I’m working with it is still doing this (screen shot attached). Today this screen shot was taken at 980px width and 981 and 982 and 983 and 984px width. So it’s not a matter of well it works for you because it’s clearly not the same on my end and it should work smoothly across all browser platforms right?

Any actual help would be of great appreciation, thanks in advance.

[Joao]

Hi There,

You are indeed correct it should work flawless on all browsers since the settings are based on the secreen width.

Please clean your browser cache and try it again.

I am not trying to prove you wrong, it is just unlikely that we are getting this result and you a different result, unless you have a older version of your site cached on your browser.

Thanks

Joao

[Author]

Posts