All Levels Navigational Menu (v3.02) Responsive Design?

[carolineleonard]

Hi,

I am using a respoinsive template design and was wondering how to change the code so the menu also displays responsively. Please see attached image.

Many thanks,
Caroline


4995

[ajfmrf]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[carolineleonard]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Thank you, the address is:

http://www.seims-dlr.co.uk/index.php/2013-03-04-14-14-35/asset-hierarchy-b92


Access: temp
Password: temp

[Beverleyh]

When you say that you want the menu to behave "responsively", do you mean that you want it to shrink and expand with the width of your page?

To a degree, it's already doing that, but I just notice that you're using Joomla! and if the page is embedded in a wrapper, it will be limited to the wrapper width defined by the Joomla! template (Joomla! templates used to be capped at 960px wide, but I dont know if thats still the case - your template looks like it is).

You can use media queries to reduce the menu font-size at smaller screen widths - that would make the menu fit on narrower viewports at least: http://css-tricks.com/css-media-queries/ and http://css-tricks.com/snippets/css/media-queries-for-standard-devices/. I dont know how well it will work on a Joomla site though.

[carolineleonard]

Hi Beverley,


Thanks for getting back to me.

Yes that's what I mean- It shrinks fine on the iPad and doesn't have that issue as per the image (overlapping and purple/blue background) only when I reduce the browser on the PC..