Hi, I have recently started working on a Xero based site, which is coming along nicely. Apart from some additional content and tweaks it is nearly ready to go live but I'm seeing some strange behaviour on mobile devices with the menu exhibiting the Stickynav behaviour.

Everything else seems to work as expected on small screens (e.g. the standard menu is just an empty blue bar with no menu items, the offcanvas icon shows and is populated with the main menu, sidebars are loaded below the main content etc.) but the blue bar that would contain the menu items on a desktop screen sticks to the top of the screen as it would on a desktop. Stickynav option is set to on in Template -> Effects, turning it off stops this behaviour but obviously also disables Stickynav on a desktop which is not desirable.

Does anyone have any idea of something I could have done to make this happen? It looks very odd indeed with an empty blue bar attaching itself to the top of the screen on mobiles!

Thanks for any help,

Alex

Hi Alex,

Is this the latest template version?

Cheers
Paul

Hi Paul,
Thanks for the quick reply. I had assumed I was using the latest version as I only downloaded Xero last week, but I was using the quickstart package which is v1.0.8 not 1.1.

I've now upgraded the template to 1.1 but unfortunately it is still exhibiting the same behaviour.

Thanks,

Alex

Hi Alex,

Do you have a link for the site?

Thanks
Paul

Hi Paul,

Sorry, I disappeared for a while there!!

You can see the work in progress version of the site here: www.serenitymobile.co.uk/j2/

If you have any ideas what is causing this behaviour please let me know.

Thanks again for your help,

Alex

Hi Alex,

If you add this

@media screen and (max-width:787px) {
#menu {min-height: 0;}
}

Does this fix the problem?

Cheers
Paul

Paul, thank you for the incredibly quick reply once again!

Sorry, I'm figuring out Joomla as I go with this site, when you say 'add this' could you confirm where you mean to add that to? Should it go in the custom css or something?

Cheers,
Alex

Yes please add it to the custom.css page

I'm not a 100% sure I'm targeting the right issue as I don't have a device to test on

Cheers
Paul

There are a few other css options on this template for more info please check out

docs.joomlabamboo.com/getting-started/how-to-add-custom-css-to-joomlabamboo-templates

Cheers
Paul

Hi Paul, thank you so much - this certainly works as a fix as it removes the menu bar altogether. Which stops things looking so weird on mobile!!

I'd prefer to find a way to make it match the default Xero behaviour I see in the live preview which retains the menu bar but doesn't have it sticking to the top of the screen on small screen devices but this will certainly do as a fix for now.

Also re not having a device to test on, this just led me to discover something strange. If I load up the Xero live preview in a desktop browser the site behaves as expected but shrinking the width of the browser window so it goes to small screen mode causes the same behaviour I see on my phone with the menu bar sticking to the top of the page. My site does the same in my browser, so on a low width desktop browser both my site and the joomlabamboo xero preview behave exactly the same. However, on my phone only my implementation behaves like this and the empty menu bar scrolls off the top of the screen in the live preview version. Very odd!

Thanks again for your help, I've got a bit of time right now and will play around with this a bit more before putting your fix in place and see if I can work out what is different in the sites, I'll post back here if I find anything.

Cheers,

Alex

Hi Paul, posting the above made me think there must be something different between my site and the preview outside of the screen size responsiveness stuff. I just tried enabling the "Use mobile detect library" option in the template settings and the menu bar is now scrolling off the page on my phone as I was expecting to see!

Thanks again for your help, this looks fine to me now.

Cheers,

Alex

Arrgh - so I was talking complete rubbish before about this now working. I don't know if I was just being stupid (most likely) or if something else I've changed has changed this back to the previous behaviour but it's certainly doing exactly the same thing again now.

I will implement your fix for now Paul but I would love to find a way to have the menu bar show and scroll away like happens on the live preview. Any further ideas very much appreciated.

Cheers,

Alex

Ok, apologies for the stream of conscious style rambling on this thread! After my previous post, I'm hesitate to say this is now working, but after adding the below to custom.css I appear to be getting the desired behaviour (on both phone and small browser window).

@media screen and (max-width:787px) {
#navwrap.fixed {
position: relative;
}
}

Paul, as mentioned before I don't really know what I'm doing and am kinda making things up as I go along with this site. Would appreciate your thoughts on if the above makes sense or if I'm likely to encounter some unexpected (by me!) results from adding the above.

Cheers,

Alex

Hi Alex,

Are we talking about the blue block that is the background for the menu which becomes empty when it switches to a mobile menu?

Cheers
Paul

Yes. That's the one.

Did this not work?

@media screen and (max-width:787px) {
#menu {min-height: 0;}
}

Can you just test by trying a different style of theme (other than flat) and see if it works then?

Cheers