PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Sep 22, 2017 10:14 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 19 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Thu Nov 24, 2016 11:19 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
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:
File comment: Zip file of website files
fusion.zip [2.45 MiB]
Downloaded 111 times

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
PostPosted: Sun Nov 27, 2016 12:15 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6348
Location: Montreal, Canada
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
Screen Shot 2016-11-27 at 12.13.04.png [ 55.23 KiB | Viewed 4266 times ]

_________________
Supported PHP versions No longer supported versions
Top
 Profile  
 
PostPosted: Sun Nov 27, 2016 12:31 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Sun Nov 27, 2016 12:36 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: 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.


Top
 Profile  
 
PostPosted: Sun Nov 27, 2016 2:14 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: 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.


Attachments:
File comment: screenshot
ss.jpg
ss.jpg [ 68.2 KiB | Viewed 4264 times ]

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 8:48 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6348
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:00 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:05 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6348
Location: Montreal, Canada
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


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:07 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:12 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6348
Location: Montreal, Canada
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


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:14 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:14 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6348
Location: Montreal, Canada
This is how it looks on 5S with no changes made


Attachments:
Screen Shot 2016-11-28 at 09.13.53.png
Screen Shot 2016-11-28 at 09.13.53.png [ 434.28 KiB | Viewed 4250 times ]

_________________
Supported PHP versions No longer supported versions
Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:18 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:20 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6348
Location: Montreal, Canada
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


Top
 Profile  
 
PostPosted: Mon Nov 28, 2016 9:26 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
attached.


Attachments:
File comment: site
site.zip [2.5 MiB]
Downloaded 93 times

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 19 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group