TOPIC: Full screen in responsive mode

Hi Daniel
I am using Hotspots in full screen mode, which is working great, especially after a few template customisations. However, I just have a couple of things I would like to resolve.

The url is here: www.clubmeal.co.uk/map

In fullscreen mode the navigation bar in my template is still visible, and it is overlaid on top of the top section of the Hotspots map. In fact, this is great as it retains site navigation for users, but unfortunately it hides any hotspots which happen to be underneath the nav bar.
The second issue is that the map screen area in mobile responsive mode is very small. This may in part be because the nav bar is hiding the top strip of the map, but in any case it was quite small before I used the full screen mode.
I am wondering in the first place if there is a way to move the map display downwards by the number of pixels that the nav bar occupies? This would solve both problems in one go.
However, this may be impossible. I suppose the alternative would be to hide the nav bar altogether, but this would leave a site navigation problem.
I am guessing in any case that it is possible to extend the map down the screen in mobile mode, and if it is too difficult to resolve the other issue, I will just live with some hotspots being hidden for the time being.
Thanks for your help.
PS; I may have found a partial way around this, by making the top nav bar semi-transparent in the map page, so hotspots are visible under the bar, but navigation is still possible. However, I would like to make the map a bit bigger, top to bottom, in mobile view, if that is possible? Thanks

Hey Simon,

I'm not sure what you want - do you want to hide your navigation, or do you want to have it there and move hotsptos 60px down?

if you want to hide the navigation you know the css class to work on as you'e already made the navigation transparent. You can set it to display: none and it will be gone.

if you want to move it 60px down, then things get a little tricky, but they are still easy. Instead of using the fullscreen option in hotspots you could use your tempalte for this (if your template allows it).
The thing is full screen is nothing else than having the map set to fixed with top: 0, bottom: 0, left: 0 and right: 0. But if your template was just to show the navigation and hotspots on the page you could style the div of hospots to be in the available space. I've done this on few websites. So basically you create a special tempalte just for the hotpots page, that would just show the navigation and below that you would have the hotspot div that takes all the avaiable space.

Do you get the idea?
Regards,
Daniel

Hi Daniel

Creating a template for the map page sounds like a good idea. I'll take a look at that and get back to you.

Many thanks for your help.

Simon

Hi Daniel

Okay,this is a bit outside my experience now, so apologies if I make stupid mistakes with this. I have created a duplicate style of my main template and assigned it to the map page, and unassigned the default version to that page. I should now be able to make changes to that version of the template without affecting the rest of the site, presumably.

If I can do what you suggest with CSS, I'm using a Gavick template which has a CSS override, so it could be quite simple.

Could you suggest what CSS I might have to add to style the div correctly?

Thanks

Hey Simon,
I replied in your ticket. But for the other users wondering how this should work. Well, you need a copy of the template where the main container has a width of 100% and the height of 100% minus your navigation height. I haven't come up with an automatic way to do this ( Idoubt that there is one). Such a thing needs to be created for each template out there as it's not something you can generalize.

Regards,
Daniel