Page 1 of 2
Wordpress CSS Mobile Menu - width issue
Posted: Thu Nov 24, 2016 10:19 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Sun Nov 27, 2016 11:15 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Sun Nov 27, 2016 11:31 am
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
Re: Wordpress CSS Mobile Menu - width issue
Posted: Sun Nov 27, 2016 11:36 am
by simonmlewis
Also note that your toggle is now not inline with the logo or search....
Re: Wordpress CSS Mobile Menu - width issue
Posted: Sun Nov 27, 2016 1:14 pm
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 7:48 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:00 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:05 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:07 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:12 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:14 am
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?
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:14 am
by Celauran
This is how it looks on 5S with no changes made
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:18 am
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.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:20 am
by Celauran
What does your code look like now? Want to make sure we're at least working with the same starting point.
Re: Wordpress CSS Mobile Menu - width issue
Posted: Mon Nov 28, 2016 8:26 am
by simonmlewis
attached.