Wordpress CSS Mobile Menu - width issue

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Wordpress CSS Mobile Menu - width issue

Post by Celauran »

It's not perfect, but what if you used vw instead of px for the menu width?

Code: Select all

.main-small-navigation ul {
  width: 100vw;
  margin-left: calc(-50vw);
}
Again, not a front end guy, but hopefully that's enough to get you started.
Attachments
Screen Shot 2016-11-28 at 9.39.41 AM.png
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Wordpress CSS Mobile Menu - width issue

Post by simonmlewis »

After a little tweaking with it:

Code: Select all

.main-small-navigation ul {
    margin-left: calc(-63vw);
    width: 95vw;
}
Works perfect!
So what is "vw", and what is that calc(-63vw) ??

Not heard of either of those.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Wordpress CSS Mobile Menu - width issue

Post by simonmlewis »

I'll have a good read through. Thanks so much.
That was a challenging one!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply