Hi Gary

1./2. At what width would you like your mobile menu to kick in? Would you have a URL to an example of your top menu?

3. May I suggest the following tutorial which details how to add a new module position to the header area of your template... http://www.joomla51.com/tutorials/item/creating-a-new-module-position-in-the-header-area-of-your-template

Ciarán

I was thinking of having it kick in at a width of around 800. You can check out the site at http://www.christtheteacher.ca/newcttcs. I notice on the GRAFIK demo site that you have the same issue. If you window your browser and start to narrow the width of the window it cuts off the "Typography" menu item before it kicks into the mobile menu. You can change the "Template Width" setting to change this but I don't want to set that to anything less than 1100. I was hoping there was a way to make the menu responsive so that it would slide towards the logo a bit before the mobile menu cut in.

I looked at that tutorial on how to add a new module position but but it doesn't say it applies to the GRAFIK template so I didn't think it would work.

Gary

Hi Gary

In hindsight it might be best if you could set us up with temporary administration access to your Joomla installation as there is CSS that has to be removed throughout your CSS files for us to implement the new CSS. Details can be sent to info@joomla51.com. For our reference please paste a link to this post in your email.

The tutorial will also apply to our Grafik template.

Ciarán

Thank you Gary

We have made your requested changes to your template.

Ciarán

This is perfect, exactly what I was after! Thank you sooo much! You guys are the best!

Sorry to be a pest but I have one more question. When I change the template width to say 1200px in the template settings in Joomla, it screws up the menu again and it doesn't start to collapse right away and the right hand menu item get cut off. Is there something I have to change is css when changing the template width settings?

Thanks,
Gary

HI Gary

Yes you will have to edit your responsive.css first listed media query to match that of your new template width (../templates/j51_grafik/css/responsive.css). Replace te value that was set to your original template width to your new template width

Ciarán

Ok, I'm still having some issues with this responsive menu. When you reduce the width of the browser window it squeezes together just fine but once it starts squeezing, some of the drop downs on the menu stop working. Any ideas?

Gary

Hi Gary

Could you try adding the following to the Custom CSS field of your templates parameters..

.logo a {

    z-index: 5;

}

Ciarán

Hi Ciarán,

That fixed the menu problem but it killed the link on my logo. I really need to be able to click on the logo to get to my home page since I don't have room for a Home button in the menu.

Gary

Opps :blush:

Could I ask you to remove that CSS and also remove the following from your templates responsive.css (under tablet - landscape). That should resolve both issues.

logo_container, h1.logo, h1.logo a {width:820px !important;}

Ciarán