Wordpress CSS Mobile Menu - width issue

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

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Wordpress CSS Mobile Menu - width issue

Post by simonmlewis »

I am using the wordpress theme "Radiate Pro" from Themegrill. But there is a problem even they cannot seem to fix.

When viewing this site shrunk down to mobile view, and you tap the Mobile menu toggle, the menu is about 65% width of the screen. So if you have two or three words in the menu link, it wraps. It needn't wrap because there is so much space to fill in the screen.

Is it down to the width set for the menu, or the container that the small menu resides in?

I cannot sort it. So maybe someone can spot it.
Attachments
fusion.zip
Zip file of website files
(2.45 MiB) Downloaded 613 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

Looking for something more like the attached screenshot? I just set .main-small-navigation to full width (could easily apply to ID if it has spillover effects elsewhere) and then moved the .menu-toggle paragraph to be aligned right.
Attachments
Screen Shot 2016-11-27 at 12.13.04.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 »

If I set the main-small-navigation to be 100% it goes off the screen.
And I don't see a menu-toggle p (paragraph) tag.
What you have done is genius. But how? lol
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 »

Also note that your toggle is now not inline with the logo or search....
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 »

This is the best I can do. Which is very little indeed.
I cannot move the menu toggle position, so i guess the right edge of the "dropdown" has to stay where it is.

But I don't know why it's not allowing it to go wider to the left. Something must be stopping it from "stretching out". Otherwise those wrapped words, wouldn't wrap.
Attachments
screenshot
screenshot
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

simonmlewis wrote:Also note that your toggle is now not inline with the logo or search....
It wasn't before I started tinkering, either. Might be something specific to Firefox.

EDIT: Looking at it again this morning, it seems to happen only at smaller breakpoints. iPhone 6S displays inline, 5S does not. Separate issue, but needs to be fixed.
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 »

On anything below 768px, it's bad.
Plus, when I tried what you did, I couldnt' get the same result.
Can you show me the CSS you did please.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

I can, but I don't know that it will change much. Looking at it again this morning, I'm seeing some odd choices made with the markup. I'm not a front end guy, but having a wide menu as the child of a div 66px wide and then trying to stretch it out using pixels seems like a poor choice for a responsive site.
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 »

66px is for the 'burger button' toggle I think.
What puzzles me is why the LI tags for each menu, don't allow the text in the menus to stretch out.
The developers of this theme have said they cannot fix it. But surely it is merely a CSS issue?!
Something is holding back those widths.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

Indeed. Their parent item, .main-small-navigation ul has a set width of 200px. Its parent, .main-small-navigation, has a fixed width of 66px.
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 »

So do you see anyway to fix this, so on a mobile, that dropdown menu that appears, is wider? particular on a iphone 5?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

This is how it looks on 5S with no changes made
Attachments
Screen Shot 2016-11-28 at 09.13.53.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 »

Yes. I have since tweaked the CSS to bring in the size of the image on a 768- screen. So it is ALL now inline.
But the dropdown still has the problem. That width of the dropdown menu. Hence my last screenshot.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
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 »

What does your code look like now? Want to make sure we're at least working with the same starting point.
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 »

attached.
Attachments
site.zip
site
(2.5 MiB) Downloaded 587 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply