Possible to use different module positions for built-in gantry menu on desktop vs mobile devices?

[alston]

Hello,
I love how when I toggle the "menu control" to on in the admin -> template -> gantry -> menu page it shows up on mobile devices as the button to have the menu slide down and be visible or to slide back up and hide.

My question is this, I was wondering if I could set this position to be different on desktop vs mobile sites.  I'd like it to be at the top on a mobile device like in a header position, but then on the desktop I'd like to have it in the sidebar-a position so that it's level with the content located in the component area.

Also, can I style this menu differently for desktop vs mobile viewing?  And if so, can you please help direct me towards some examples of syntax on how to do so?

Thank you in advance.

[Luke Douglas]

Alston,

Actually, no. The problem is that in the template manager, you can only assign one position for the default template menu.  You can't duplicate the template and assign the menu to a different position (well you can but not for your purposes) because there is no one to know which template to use for large, desktop, tablet or phone.

However, you can disable the default template, use RokNavMenu to create two menu modules and assign your default menu to each one.  Then set the one that you want for non-mobile sites to the position you want that menu to be displayed and assign 'visible-large visible-desktop desktop-menu' to the module class for that module.  On the other menu module which will be for your mobile display, set it to the position you want and assign 'visible-tablet visible-phone mobile-menu' to the module class for that module. 

Now notice that I added the class 'desktop-menu' and 'mobile-menu' to the classes.  This will allow you to customize the menus using CSS.

It does work as I've done this before.

Luke

[alston]

Hey Luke, thank you very much for your response.  That was pretty much what I'd been thinking, but I wanted a second opinion.

On that note, I want to recreate the functionality that the above referenced menu has on smaller mobile devices, where it's got the "three lines icon" that allows you to toggle this menu on-screen and off-screen when clicked.  Do you know of any resources that are on the web instructing me how to style this type of menu?

Or, do you know if it's simply a menu using CSS3 transition effects with negative margins to hide and show it on clicking?  I know what it is I want to do, just what I described, but I'm just not sure where to start looking...

[Luke Douglas]

One of my standard CSS snippets is to put 'Menu' text instead of the three horizontal lines. I prefer this as it requires no download of an image which reduces page loads on mobile devices.

Here is the code

/* style for mobile menu background color and position */
.gf-menu-toggle {
margin-top: 100px;
background-color: #947156;
background-image: linear-gradient(to bottom, #947156, #D5A37C) !important;
}

/* style for mobile menu background color and position on hover */
.gf-menu-toggle:hover {
background-color: #BA8D45;
background-image: linear-gradient(to bottom, #D5A37C, #C0926F) !important;
}

/* hide default horizontal bars on mobile menu */
.gf-menu-toggle .icon-bar {
visibility: hidden;
background-color: #eeeeee !important;
}

/*Add Menu text to responsive menu toggle button. */
.gf-menu-toggle:after {content:'Menu';float: left;font-size: 0.5;color:#ffffff;}
.gf-menu-toggle:after { margin-top: -15px;}

About the only thing I change is the background colors and the margins depending on where I want the menu to display vertically. It works great!

Luke

[alston]

Hello Luke,
So I've been trying to make this happen with my mobile menu.  Essentially I have a site, using Gantry/Joomla 3.0, I've two main menu mobules, one is for viewing on desktop and larger screens, the other is for viewing on mobile devices and smaller tablets.  I used the gantry classes to make these menus visible and invisible depending on what you are viewing them on.

The mobile menu works, and it's all using the responsive grid option in the backend.  But I'd still like to figure out how to do a mobile menu like we were discussing above.  I tried using an all CSS3 method as well as other options with a combination of jQuery, CSS, and HTML, but still no luck.

If you have a chance to look over my site, I would love any additional input.  Or, if it would be easier to post my CSS or the HTML output of the page I could do that also.

site url:  mobile-test.visualeight.com

Thank you.

[Luke Douglas]

Alston,

Nice Reel!

OK, I believe what you mean is that the mobile menu toggle does not show up in the upper left hand corner (default location).  I believe the reason is that you are using a default menu instead of a fusion menu setting.   As far as I know, the fusion menu is always horizontal. 

I'm assuming you don't like the vertical menu because it takes up real estate and doesn't display your face, which I agree a menu toggle would be better.

Check your RokNavMenu module settings for the 'mobile' module only and make sure it is set to Default fusion instead of Default.

Luke

[alston]

Hey Luke,
Thanks for pointing that feature out for me, I'd overlooked it so far up to now.  I selected "gantry-dropdown" as I want that show/hide effect.

My question is, I'd like to style this menu button but am running into some issues when I want to style say, the #rt-top on the mobile viewing only.  Is there a way to turn on a class for the entire mobile viewing site, on phones and tablets, so that I can style the same areas differently when viewed on destop and large screens vs phones and tablets?

[Luke Douglas]

Alston,

For some reason, my previous post was deleted and it was extensive so I'm writing it up again without a couple of comments about the Gantry Framework.

If you look at the source code for your website, this is what you will see:

<body  class="logo-type-custom headerstyle-dark font-family-helvetica font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home ">

Notice the 'headerstyle-dark' class.  If you open up your Gantry template in the Template Manager, look under the Style tab, you'll see that the Style is set to 'Dark'.  There is a 'Light' option that will set the class as 'headerstyle-light' class.  You can actually use this to create two completely different website styles.

Now this gets a bit tricky but here is how you can do it. Now you have already created your new 'mobile-menu' as you've put it in a 'header' module position.

1. Go to the Template Manager
1. Click the checkbox next to your default gantry template
2. Click the Duplicate button above. You should see a 'gantry - Default (2)' template.
3. Open the duplicated template and change the Style Name to 'Gantry - Mobile'.  This is only for display purposes but it will help keep your mind clear on what you're working on.
1. Click the Style tab
2. Click the checkbox next to the Header Style
3. Click the down arrow and select 'Light'
1. Click the Assignments taba
2. Click all checkboxes on your 'mainmenu-mobile' menu.
4. Click Save & Close
2. Now open up a browser, reduce the width until the 'mobile' menu appears, right-click and View Source or use the developer tools to see the HTML code.
   
3. Look at the BODY tag. It should have this code:
1. <body  class="logo-type-custom headerstyle-light font-family-helvetica font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home ">
4. If you see 'headerstyle-light' instead of 'headerstyle-dark', that's good!
5. Now increase the width of your browser until the mobile menu / horizontal menu is replaced by the vertical menu.
6. Again, look at the HTML code and if 'headerstyle-dark' is in the BODY tag.  You're in business!

With these classes, you can create different looks for different elements.

Example:

Your current gantry-custom.css file does not have any '.headerstyle-dark' classes. The first order of business is to detemine what needs to remain the same on both "large | desktop" as well as "tablet | phone".  Any CSS that will not be changed does not need the 'headerstyle' type to preface the CSS declaration.

Example:

If you want your mainbody-surround background to be '#ffffff" (white) on all displays, then leave it alone.

#rt-mainbody-surround {
    background-color: #FFFFFF;
}

On the other hand, let's say you want the "large | desktop" 'mainbody-surround' background to be #ffffff (white) but you want it to be #cccccc (light-gray) on "tablet | phone".  Here is how you would do it.  Add '.headerstyle-dark' in front of the '#rt-mainbody-surround".  Copy and paste it below the first declaration but change the 'headerstyle-dark' to 'headerstyle-light' and the '#FFFFFF' to '#CCCCCC'.

.headerstyle-dark #rt-mainbody-surround {
    background-color: #FFFFFF;
}

.headerstyle-light #rt-mainbody-surround {
    background-color: #CCCCCC;
}

Make this one simple change, then view the site in desktop mode and then 'slightly' change the width to 'tablet' width where the horizontal menu appears.  The background should change to light gray.  If it does,  you now know how to make style changes for mobile.  Simply prefix any declaration with '.headerstyle-light' and that will only appear on mobile displays.  Anything prefix with '.headerstyle-dark' will only show on 'non-mobile' displays.

I hope this helps you!

Luke

[Alston Chapman]

Thanks Luke.  I knew of those different styles but I never  connected that they would give a different class.  I always kind of viewed them as a hassle because I'd have to get rid of so many styles.

I really am loving those gantry classes too, for hiding/showing modules from desktop to mobile.. pretty cool!

A bit off the subject, but do you know of any good resources that are in depth about Gantry and how it's put together, aside from the actual gantry website?

--
--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to
gantry-framework...@googlegroups.com
To unsubscribe from this group, send email to
gantry-framework-for-j...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org
 
---
You received this message because you are subscribed to a topic in the Google Groups "Gantry Framework for Joomla Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/gantry-framework-for-joomla-users/JWICvCSjLD0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to gantry-framework-for-j...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Alston Chapman


Visual+Eight
214 Witmer Street
Los Angeles, CA 90026
323-333-5124
www.visualeight.com

Web Design, eCommerce, and SEO in downtown Los Angeles.

[Luke Douglas]

Alston,

Well I joined as a developer on the RocketTheme website but that might be steap for just one website.  It gives me access to the forums and that has been helpful but, to be honest, most of everything I learned about Gantry came from the default Gantry Framework site, the Gantry for Joomla Google Group and just plain fooling around with it.

Of course, I have one advantage you might not have.  I did my first website about two months after the internet began. LOL  I'm an old codger. :)

Luke

[alston]

Hey Luke, I would say you've got some experience on me in this area :)

Thanks for your help!