iPad Top menu position

Support forum dedicated to GameNews game Joomla template perfect for gamers, game portal news and reviews with dedicated extensions for rating and video support
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Thu May 23, 2013 8:06 am
Reply with quote
Report this post
Dear All,

I've noticed another aspect of the Game News template that I would like to change and it's how the top menu bar that is used in the template reacts when viewed on an iPad (i.e. running at 1024 x 768 resolution)

On the main Gavick website i.e. https://www.gavick.com/ the top menu bar (the one with the Facebook, Twitter icons etc) stays at the top when viewed on the iPad, but with the Game News' demo site http://demo.gavick.com/joomla25/gamenews/ the Top menu displays at the base of the site and this also happens on my own site (see attached images for examples).

I noticed that you can change various width sizes in the template configuration page, however because the iPad is technically using a desktop style resolution of 1024 x 768 it is not treated as a tablet when viewed in a landscape orientation, but regardless of this it keeps sticking the top menu (with the Facebook icons etc) down at the base).

However If you view the demo site on a PC with 1024 x 768 resolution it does not.

Is there any code I could use to prevent the iPad from pushing the top menu to the bottom? I have tried reducing the number of menu items but this does not work. Could it be the menu bar width itself that is the problem?

Brett
User avatar
Senior Boarder

GK User
Thu May 23, 2013 8:37 am
Reply with quote
Report this post
To emulate tablet behavior on desktop, You only need to reduce browser width (make it smaller). Then You see the same behavior.
"tablet" layout is being loaded when browser width is less than 920px.
With iPad it is a little bit tricky, but You could find all the info you need here:
http://stackoverflow.com/questions/3375 ... t-standard

What changes is:
when under 920px:
Code: Select all
#gkTopBar {
background: #282828;
height: 40px;
margin: 0 -10px!important;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
}
demo.gavick.commedia="(max-width: 920px)"
#gkTopBar {
height: auto!important;
min-height: 40px!important;
overflow: hidden;
position: static!important;
width: auto!important;
}

when over 920px:
Code: Select all
#gkTopBar {
background: #282828;
height: 40px;
margin: 0 -10px!important;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
}


Now You could work to prevent that look and modify "tablets" styles, but I would firstly look at meta tags that specifies iPad behavior.
User avatar
Moderator

GK User
Thu May 23, 2013 4:16 pm
Reply with quote
Report this post
Thanks for the suggestions,

Is the code you mentioned found in the template.css file?
User avatar
Senior Boarder

GK User
Thu May 23, 2013 6:22 pm
Reply with quote
Report this post
I've tried to follow the link but it did not make any sense to me - my coding skills and knowledge are lost here :-)

However I have a feeling that the issue revolves around the position: fixed; syntax.

For example on Google Chrome desktop I use the Inspect Element tool and point this to #gkTopBar css and it reveals this code...

Code: Select all
#gkTopBar {
background: #282828;
height: 40px;
margin: 0 -10px!important;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
}


If I then untick the option position: fixed; the bar moves to the base of the site, exactly as it does on the iPad.

So this is the cause, now I just need to know how to go about sorting this on the iPad.

I've noticed that there are several css files in the list template.css, tablet.css and mobile.css all seem to have #gkTopBar code so any ideas of which one I would need to look at?
User avatar
Senior Boarder

GK User
Thu May 23, 2013 9:53 pm
Reply with quote
Report this post
There is a lot of information in things i posted, but to make it as easy as can be - if You will setup "tablet" width to eg. 910px everything should work as You like.
User avatar
Moderator

GK User
Fri May 24, 2013 4:00 pm
Reply with quote
Report this post
Hi thanks for the suggestion and all your help, but I have found the solution to the problem :-)

The key is to find the section in your template.css file (near the bottom) which relates to the tablet fix.

I took this info and added it to my override.css file and then went about modifying the code (which is what you can see here)..

Code: Select all
/* fix for the tablets */
body[data-tablet="true"] #gkTopBar {
   height: auto!important;
   min-height: 40px!important;
   overflow: hidden;
   position: fixed!important;
   width: 100%!important;
}
body[data-tablet="true"] #gkTopBar > div > nav {
   float: left!important;
    margin-left: -35px;
}
body[data-tablet="true"] #gkTopBar nav#gkTopBarUsermenu {
   clear: both;
   float: left!important;
}
body[data-tablet="true"] #gkTopBarUsermenu,
body[data-tablet="true"] #gkTopBarUsermenu ul,
body[data-tablet="true"] #gkTopBarUsermenu ul > li {
   width:100%;
}
body[data-tablet="true"] #gkTopBarUsermenu ul > li a,
body[data-tablet="true"] #gkTopBarUsermenu ul > li span {
   float: none!important;
   padding: 0!important;
   text-align: center!important;
   width:100%;
}
body[data-tablet="true"] #gkTopBarUsermenu ul ul {
   display: none!important;
}


The key elements to the above are the body[data-tablet="true"] part which will detect if the device is in tablet mode and the position: fixed!important; option, which I added. The latter will stop the Top navigation bar from moving to the base of the site.

I also adjusted the width to 100% so that the styling could fill the screen better otherwise if it is set to auto it will shrink the top bar and in my opinion this looks rubbish.

The above works. It's not an elegant solution as sometimes the responsive nature of the bar does not display as well when switching backwards and forwards between portrait and landscape, but it works, and the iPad landscape mode behaves like the desktop version now. The only thing you may need to do is adjust what the site behaves like in portrait mode.

Another tip is if you want to adjust the mobile side of things (for devices with a smaller resolution) just replace the body[data-tablet="true"] part with body[data-mobile="true"].

Sorted ;-)

Brett
User avatar
Senior Boarder

GK User
Mon May 27, 2013 2:18 pm
Reply with quote
Report this post
Great solution - thanks for sharing it with all users!
User avatar
Moderator


cron