Menus ... customize item width ... mobile support

Hi all. I have a couple of questions on menus. I'm still learning Joomla, and have only extremely basic HTML knowledge ( I'm a developer, but never touched web stuff ). I'm trying to get menus rendering properly on monitors set at 800x600.

I've changed template_css.css and reduced the font-size from 13px to 10px ... and also changed padding from "6px 15px" to "1px 1px". This has made things a little better, but still menus go off the right-hand side of the screen on small resolutions. Also with the font size so small, the menus look pretty bad on large monitors. Is there a way to trigger a line-break for menu text? Is there some way of having menus look nice on large monitors, while NOT scrolling off the right of the page on small monitors?

The next issue is that I'd like this site's menus to work on mobile devices. When I view on my Android phone, I can click menu headings, but this triggers a 'navigation' back to the main page. The menu drops down quickly, but obviously I'd like it to drop down and stay ... without triggering navigation back to home.

How should I approach both these issues? I've spent a VERY LONG TIME trying out menu extensions ( I'm running Joomla 3, by the way ). Most extensions appear to not work at all, and those to do work have major issues. I don't know enough about what I'm doing to say whether there are incompatibilities between this template and the extensions I'm trying. I've tried the 'Hot Flashes Menu' ... I can't even get this working, and you'd assume it would be compatible?

Should I stick with the default menus and edit css or something? Should I get an extension working?

The site is: igen.dyndns-server.com/

Help please

You added/removed/changed come css with consequence of menu on your site being damaged (it should not break see our demo). Are you sure you just changed font and padding (maybe padding is problem)

I made the following changes, based on advice I saw given on this topic, in another thread. Here is what I've changed:

lenovo css # diff -u template_css.css.orig template_css.css
--- template_css.css.orig 2013-03-13 20:46:22.732810149 +1100
+++ template_css.css 2013-03-14 23:03:16.613116388 +1100
@@ -623,9 +623,9 @@

#nav a, #nav span {
display:block;
- padding:6px 15px;
+ padding:1px 1px;
text-decoration:none;
- font-size:13px;
+ font-size:10px;
border-bottom:none;
font-weight:normal;
cursor: pointer;
lenovo css #

Also, note that I wasn't reporting anything was broken. I was asking for help and advice ... looking for the best way of getting this menu structure rendering well on low resolution displays. I have tested both with these changes ( above ) and without them. Many menu extensions simply don't work. So there seems to be very little scope to change the default menu appearance. So ... if anyone knows methods that work with this template ... that's what I'm looking for ... advice on which method to use.

Update ... I've spent some time on Maximenu CK ... and I'm hoping I can get this menu extensions working with this template. There are 2 issues currently:

1) A vertical scrollbar appears to the right of the menu.

2) When menus drop down, they don't render outside the user3 position ... whereas I'd expect them to take up as much vertical space as required, and render over whatever page contents there are.

Link:

igen.dyndns-server.com/

Does anyone know what is causing these issues?

It's not supported that you use other menu in responsive. You can use firebug or chrome inspect element to help you adopt it.

If chrome or firebug shows some css entry is actually on page and not in some css file that meant that css in template_css.php