PDA

View Full Version : All Levels Navigational Menu (v3.02) Responsive Design?



carolineleonard
03-22-2013, 12:31 PM
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
03-22-2013, 01:21 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

carolineleonard
03-22-2013, 01:53 PM
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
03-22-2013, 02:16 PM
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
03-26-2013, 04:28 PM
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..