Wordpress CSS Mobile Menu - width issue
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
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.
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.
All the best from the United Kingdom.
Re: Wordpress CSS Mobile Menu - width issue
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.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Wordpress CSS Mobile Menu - width issue
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
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.
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
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.
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
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.
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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Wordpress CSS Mobile Menu - width issue
It wasn't before I started tinkering, either. Might be something specific to Firefox.simonmlewis wrote:Also note that your toggle is now not inline with the logo or search....
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
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.
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.
All the best from the United Kingdom.
Re: Wordpress CSS Mobile Menu - width issue
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
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.
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.
All the best from the United Kingdom.
Re: Wordpress CSS Mobile Menu - width issue
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
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.
All the best from the United Kingdom.
Re: Wordpress CSS Mobile Menu - width issue
This is how it looks on 5S with no changes made
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Wordpress CSS Mobile Menu - width issue
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.
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.
All the best from the United Kingdom.
Re: Wordpress CSS Mobile Menu - width issue
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
attached.
- Attachments
-
- site.zip
- site
- (2.5 MiB) Downloaded 588 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.