Drop Down Menu

It looks exactly as I want it to look on my site.

I have put the suffix in...and added the css code to the custom.css file under the mobile templates for iphone and smartphone.

Which file do I call the mobMenu class in? I am using Joomla 1.5 as well.

I have all menu styling in the custom.css file in the css directory this is the same for both smartphone and iphone.
I don't care about other mobile devices.

Use firefox and firebug to see the styling, that saved many hours for me.

Use the URL: yourdomain.com/?device=xhtml (smartphone) or =iphone for iphone.
That simulator gives you an almost fair picture of the look of the site in the mobile (except for fon-family that doesn't seem to work on the mobile, it just take a standard font and i don't know how to use custom fonts...).
Important is that you have set up the mobMeny of any class suffix you like in the module for the menu.
If you want to go further and style up the articles you set up the class suffix in the menu items in the menu editor.

I did type in the address as you requested and it looks exactly the same. I have added the styling to the custom.css file in the iphone folder and smartphone folder for mobile module. I have the suffix in there correctly as well under Module Manager...Main Menu...Advanced parameters....Module Class Suffix. Or does it go under Menu Class suffix? Or both?

I think the problem I am having is that I have not added the .mobMen class to any of the coding in any file. Which file do I need to add the code to call in that class? I see it in firebug as I stated before like this:

<div class="moduletable mobMen">
<h3>Main Menu</h3>

But all it does is change the menu look on the website when viewing the site from a computer. The menu remains all text links next to each other versus a menu like on your site.

I appreciate your patience very much. Thanks.

In the custom.css you set up the code like this (change it to your preferred colours):

In this case the suffix is mobMeny (without any dot in front, the dot shall only be used in the css file not in the suffix, and it is a space before the mobMenu in the field Advanced settings/Module class-suffix in the module for the menu)



Can you give me the URL so I can see how it looks like?

I have all that setup right it seems. Here is the link

www.integritytranscription.com/v2

Thanks

I have checked your site, looks good but you have missed something. There's no suffix in your menu module, if it was it would simply work. So here's what to do:

A. In the MJ Component settings:
1. General tab and Homepage leve the Force as homepage empty.
2. Display component on or off depending on if you want to display content of starting page
3. Smartphone tab chose Template mobile_smartphone
4. Homepage: Set up preferred starting page (I use Home), and check Display component as off I you only want the menu and header and On if you want to display the content.
5. Under Template Modules: Top Module: mj_all_header / Mid Module: mj_smartphone_middle (in my case it's an old settig so I have mj_pda_middle) / Bottom Module: mj_all_footer

Then you set up the same things for the iphone, it all makes sense.

Now go to Modules and you should have some menus there. You can make a new menu in the main Menu/Menus, I prefer this to be sure that I have a working clean menu. In that dialog you can either copy an existing menu or make a new one. Then go back to Modules and Go into the created menu module call it mobile_menu (you name it when you create the menu). In the settings for the menu module set it up like this:
1. Name: You can set up a menu heading here if you want ( I made a "Welcome to my site" header) and choosed to show it (you can just give it a name and choose not to show it if you just want to show the meny links).
2. Activate it
3. Position: mj_all_header
4. Set it up to display only on the Home page
5. Parameters: Menu name: Be careful and check the mobile menu you created here)
6. Menu style: List 
7. Start level and End level: 0 / Always show child items: No
8. Advanced settings: Module class-suffix: mobMen (with a space first)
9. Maximum menu depth: 1
10. Save it

Now go into the module mod_mj_header (this is where I have set up the header logo)
1. Show header: No
2. Position: mj_all_header
3. You can choos if you want it on all articles or just the staring page as you did with the menu 
4. Module parameters: Show: Image / Header img URL: {{root}}templates/mobile_smartphone/resources/images/mobile_logo.png  (the mobile_logo.png is the header logo I've created and it's copied to the folder specified in the URL line.
5. Save it

Now go to the Menu/your_mobile_menu (the one you created)
1. Add the menu items you want in it.
2. In each item go to the Parameters_system and set up Page/Article class-suffix as: iphone or mobile or whatever you want. This is good to do so you can put in custom styling fitting the mobile template. This way you just modify the articles in your mobile template by adding this style in the custom.css file like this for example:
.mobile h3 {color: red; font-size: 1.5em;}  (this gives a header 3 with red font color and a size of 1.5 times the normal size and this is only on the mobile template which is handy.

This should be it! Hop you understood it. 
Good luck!

I have followed the directions. I am almost done. Its looking good except the footer is displaying over the menu near the 2nd link. have to figure that out.

Its like because there is no content to push  the back to top button and footer info down to the bottom...its naturally up at the top. Is there any way to fix this? I tried setting the footer inactive but the back to top button still stays. I want the footer to stay active but be located at the very bottom below the menu.

Thanks so much for helping me learn! You have been great!!!

LAMF, we are investigating your problem and will let you know asap

LAMF is actually helping me...I am the one having the issue.

mtechsolution wrote:


Hi there, I was referring to another problem we were discussing with LAMF. And it's great if things are working out for you.