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/m...ndard-devices/. I dont know how well it will work on a Joomla site though.
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..