PHP Developers Network

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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.

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.

_________________
Supported PHP versions No longer supported versions

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.

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.

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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.

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.

_________________
Supported PHP versions No longer supported versions

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.

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.

_________________
Supported PHP versions No longer supported versions

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.

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.

_________________
Supported PHP versions No longer supported versions

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.

This is how it looks on 5S with no changes made

_________________
Supported PHP versions No longer supported versions

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.

What does your code look like now? Want to make sure we're at least working with the same starting point.

_________________
Supported PHP versions No longer supported versions

attached.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.