Search code examples
cssresponsive-designjoomla2.5

How keep close mobile navigation menu closed upon pageloading?


I have a responsive website based on Joomla 2.5 and a Joomla51 template with a mobile navigation menu being used in tablets and mobile phones.

When opening the webpage, the mobile menu stays OPEN for quite a long time, until page-rendering process is finished. Instead, I want the mobile menu to be closed during page-rendering:

http://quirktools.com/screenfly/#u=http%3A//www.golfanatics.de/&w=320&h=480&a=33&s=1

What can I possibly do?


Solution

  • As I look at this at the moment, you have a Google font file in the head of your template (see below) and this is giving me a 400 error.

    I would fix this first because it may be delaying your css files from kicking in and collapsing the mobile menu

    Good luck!

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arial"/>
    

    Edit

    That's great that you were able to fix the font-file 400 error.

    The suggestion to try and collapse the menu bar earlier might help, though you have a moderately complex CSS and JS setup, and it's difficult for me to see how to do this in practice.

    I can also see some other issues that I would address first.

    Tools like YSlow or my favourite WebPageTest are brilliant at helping pinpoint where problems might be. If I look at your site on WebPageTest one thing that stands out for me is that the home page has a weight of almost 5MB, which is getting up there.

    The more you can reduce this, the faster the page will load for everyone, plus it will help the menu issue.

    First thing I would fix is the size of some of the images. I can see there are a number of large images loading for some reason, e.g. http://www.golfhouse.de/img/produktbilder/xxl/52418099-01-GHIE.jpg

    Maybe you can downsize these.

    Next you want to try and both minimise, and compress the css, js and image files. Ideally you could also combine all the CSS files into a single file, and likewise for the JS scripts. Options like JCH Optimize make this easy.

    You could also look into using a CDN like CloudFlare, which will both speed up your site and reduce the load on your server.

    I would expect that the combined effect of the above would help your home page load atleast twice as fast, probably more.

    Hope this helps!