Jump to content


Photo
Hero Nav

Control at which size the menu transitions to mobile view?



Best Answer Evan Mattson , 16 October 2013 - 04:16 PM

hooray! 

 

Today with the release of 1.2, there is a new option for choosing your own mobile-break point, where you can define your own width where Hero Nav changes styling from desktop to mobile.

 

The option is located at the bottom of the HeroNav options under Site Options (framework) and similarly under Global Options > Hero Nav for DMS.

 

You can use a static pixel value like "1000" or "900px" or even reference another less variable like "@resLargeDesktop".

 

The setting is global for all instances of Hero Nav, (fixed and standard or other clones if using on DMS).

 

Enjoy ;)

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 25 September 2013 - 06:35 PM

Can I control the width that the menu goes from displaying horizontally to mobile-view?



#2 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 25 September 2013 - 06:35 PM

I'm asking because I prefer the accordion style to display on any device under 1024px. 



#3 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 26 September 2013 - 05:06 PM

Good question.

 

There currently is not an option to control this but I will add it in an upcoming release.



#4 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 26 September 2013 - 05:16 PM

That would be great! I've used your plugin for the mobile navigation of this site: http://mockingbirdpaperie.com/home

 

But, I would prefer that the navigation only shows block level, with no float, like it appears when it is small. Is that possible now by editing the CSS. If so, can you help me figure it out? thanks!



#5 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 26 September 2013 - 05:27 PM

I'm not quite sure what you mean.  Are you saying you want it to display horizontally rather than stacked vertically for mobile?
http://screencast.com/t/TFBY6oTSc



#6 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 26 September 2013 - 05:29 PM

I would like it to appear like a list, similar to the way it appears on my iPhone, instead of blocks that are arranged next to eachother vertically, which is how it is displaying on the iPad.



#7 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 26 September 2013 - 05:31 PM

This is how I like it to display: http://mockingbirdpa...-1.30.15-PM.png



#8 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 26 September 2013 - 05:37 PM

that looks right to me. How is it displaying now that you don't want?



#9 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 26 September 2013 - 05:39 PM

I agree that looks good. But, on the screenshot that you posted the links are side-by-side which do not work well with this menu. So, I want it to always display like the image that I posted. 

 

I realize that this in not usually how someone would want it to work, but this is a rare case. ;)



#10 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 26 September 2013 - 06:36 PM

Right, can you show me it not displaying the way you want?

 

It sounds like you're hiding your desktop navigation and showing the HeroNav for mobile before it has switched to mobile display.

 

What is the code you're using to hide your main nav?



#11 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 30 September 2013 - 03:18 PM

 
Hi Evan! Sorry for the delay in getting back to you! I am attaching a screenshot of how the menu looks with vertical orientation of the iPad. The navigation is showing inline, but I would prefer it to display as blocks (stacked on top of eachother) like it does on the iPhone.
 
Here's the code that I used to hide the ubermenu to show the mobile menu (the menu was placed in a column section):
 
/*hide mobile nav, show ubermenu*/
@media screen and (min-width: 1024px) 
{#plcolumnxmlwl2 {display: none; }
}
/*hide ubermenu, show mobile menu*/
@media screen and (max-width: 1023px) 
{#widgetizer31qgcy, #textboxeat9gi {display: none; }
}


#12 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 30 September 2013 - 03:39 PM

Right,

 

So if you're switching to Hero Nav at 1024px, it will still be showing the full nav until the screen gets below 767px.

 

The option for this is coming soon.  Stay tuned



#13 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 252 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 30 September 2013 - 03:42 PM

@Evan Mattson Great to hear that the option is coming soon!

 

Can you add the word Title on the mobile menu next to the icon, too (or am I pushing my luck ;)? It would be great. Most of us savvy people know what the icon means, but I worry that some people may not recognize that they can get to the menu by pressing there.

 

Thanks for being so responsive!



#14 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 03 October 2013 - 02:28 PM

Soon indeed!

 

About your other question to which there is another topic for - I have replied there: http://forum.pagelin...to-mobile-menu/



#15 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 206 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 16 October 2013 - 04:16 PM   Best Answer

hooray! 

 

Today with the release of 1.2, there is a new option for choosing your own mobile-break point, where you can define your own width where Hero Nav changes styling from desktop to mobile.

 

The option is located at the bottom of the HeroNav options under Site Options (framework) and similarly under Global Options > Hero Nav for DMS.

 

You can use a static pixel value like "1000" or "900px" or even reference another less variable like "@resLargeDesktop".

 

The setting is global for all instances of Hero Nav, (fixed and standard or other clones if using on DMS).

 

Enjoy ;)







Also tagged with one or more of these keywords: Hero Nav