31: Menu buttons missing on iPad

[krazyGeoff]

Hi Jools,
I'm not sure that you have started on the mobile devices.

When the header was fixed, so the black bit went right to the top of the page, all the menu buttons in the header disappeared on the iPad.
It think it is related to the other bug that is reported about the screen sizing?
I think I saw in one of the screen shots that are attached to the other bug, that when the left hand advertising header covers the planet catfish logo, then the top menu buttons disappear.
I think this is happening on the iPad as the left hand advertising header covers up to half of the n in the word planet in the main header.

[Jools]

Hi Geoff,

Yes, I've not yet started worrying about small screen sizes like tablets and 'phones. I will do - it's just after the "fix stuff that doesn't work" issues.

Google tells me that over the last month, roughly 60% of traffic is from desktops, 30% from 'phones and 10% from tablets. I suspect if I get 'phones looking OK, then tablets will fall into place.

Cheers,

Jools

[krazyGeoff]

All good Jools,
And I hope I am not 10% of your traffic

Tablets are crap on my wrists anyway so I should spend more time at the PC.

[krazyGeoff]

Just found the menu, for anyone else reading this.
Under the letter P in the word Planet in the header there are 3 "bars"
If you click this then you get the menu as per the second image

[Jools]

That's amazing. So, that is what I hope it will look like when I get it working (with better layout for the ads/site banner). I have no idea whatsoever how it actually started working like that!

Jools

[krazyGeoff]

The good news is that it appears to be a native function, as I can do it on the pc too by shrinking the screen.
I think that when the menu bar "span area" is not wide enough for the menu items then it "decides" to make it an vertical menu, similar to the quick links.
A side effect on the PC though, is that the whole quick links area of the screen just disappears when the screen width is too small.......

Therefore in a wild Geoff theory (where this version of php is smarter than the average forum), if you only define a small width for the menu area, the system might be smart enough to just make it a vertical menu?

[bekateen]

This seems to be the same thing I observed. It's my suspicion that the elements (including the small icon with three bars) don't simply disappear, but they get moved underneath another element that has a fixed size and what I would call a "higher priority" for its position.

KrazyGeoff, you mentioned the three bars below the P on your tablet. When I reduced the window size on my desktop, I observed the same thing (except in my case the three bars appeared above the 3 fish pictures on the left side of the screen). But I couldn't access/press the three bars to click their links because their location placed them within the clicking region (I don't know what else to call it) of the 3 fish. So if I tried to click on the bars, I was directed back to the PC front page.

Cheers, Eric

[RolandNL]

Hi all,
I was reading this and maybe I am totally wrong, but I think this behaviour has to do with the responsive stylesheets doing their thing.

The site contains a seperate stylesheet called "responsive.css" and its got code that makes the horizontal navigation disappear when the content is displayed on a certain device with a certain witdh, like an iPhone or Nexus or whatever. So thats the "hamburger-icon", like the one with the quick links.

It seems however that the position of the "hamburger" is somehow fixed, where it should "flow" in the natural order with the rest of the elements.
Apart from that, for full responsive-ness more adjustments are necessary, for example most sizes of the elements should be relative instead of fixed (percentage vs. pixels).

So lets say your banner width on the desktop version of the site is 500pixels, maybe you want that to be like 60% on a mobile version of the site.

With Firefox as a browser you can somewhat make the browser behave like mobile and test this behaviour by adjusting the size of your browser window. If you go beyond a certain point you see the hamburger appear and disappear.

Thats al I have time for now and maybe you knew all this allready and in the process of fixing allready.

Cheers,

Roland

[Jools]

RolandNL is absolutely correct. I've got the layout to usable. The next job is to get the drop down menus that the forum used and the "old" tab style nav links along the top to use the same code. That's a job for another day, but they layout across various screen sizes/form factors is now usable (I think? If not, post here!).

Jools

[Jools]

I think the layout on an iPad (following some more changes since the last post) now mean it's half decent on that device / screen size. Thus, I'm moving this to resolved,

Jools