Fourth Layout

I was never really happy with the rendering of my pages on a mobile screen. Sure, the paes were technically "responsive" and the text was readble on the smaller screen, but the header with the original "hamburger" icon that I changes to a cog icon to involke the menu always took up too much space.

In addition, the pages seemed to have confused the mobile visitor, the ones that were most likely to find my pages after making a search, and the clicking on to other pages was just not happening.

The new fixed top menu for the Mobile rendering

Now I have worked out how to do this. In fact, it was just an extension of what I had worked out for the fixed menu on the medium and large screen rendering. I am also quite happy with the way that large and medium are now rendering.

Converting/Updating pages

This is not too bad as all that needs to be done is to update the mobile top-bar (use the code on this page) and then hide the header meta tag.

If a new template is generated then the header meta tag is no longer needed.

The sticky menu button is also now made redundant as there will always be a "menu" displayed on large and small screens. Tablet screen may or maynot have an overlay menu but the menu is to be found in the hover drop-down top menu.