where to change mobile menu breakpoint

randomfreeform commented 11 years ago

Been searching for how & where to change the breakpoint where the 'top-bar' menu changes from the full 'large' screen menu version
to the single 'small' screen 'MENU' drop-down type (currently at 940px).

Why?... because my site has only 4 small menu items and on iPads it's not necessary to switch... but it is for phones so I want the menu breakpoint to be just under iPads portrait size, around 767? ).

THANKS for any help and loving Reverie 4 Zhen!!

randomfreeform commented 11 years ago

(As mentioned elsewhere but sort of related to the request above...)

I'd like to also have the option to turn off the 'STICKY' in the top-bar at this defined break-point.

BTW, Is there a reason the menu style break-point is different than the grid break-point? (ie. menu changes from 'normal large' type to single 'MENU' top-bar at 940 and grid changes to 'small' at 769.)

thanks Zhen! R

randomfreeform commented 11 years ago

Zhen responded to this question on another issue.. "Doc here http://foundation.zurb.com/docs/media-queries.html. It appears you can do a custom download and set your breakpoint: http://foundation.zurb.com/download.php "

hauntedhost commented 11 years ago

any luck with this?

i downloaded a custom foundation build with 36em breakpoint, replaced all updated files in reverie theme, but still nothing.

any help greatly appreciated.

TechnologyArchitectureLLC commented 11 years ago

Well now i suspect you aren't up to date with the update that reverie just endured-

And if you start doing your own updates, you really need to understand what you are changing otherwise you will likely overwrite your work- back ups!

Is this for your personal use or for others?

You should really get very familiar with the stylesheets and use the CTRL+F feature as well as right clicking the area of interest on the Frontend after theme loads - inspect the element(s) ... Identify class name of interest and go find it- pain in the a\ - also keep in mind there is markup in Foundation JavaScript files.

Find Foundation on Github and watch their progress... Until you get more familiar, don't use their code and updated everyday until they bump up versions-

Go into stylesheet... CTRL+F and search breakpoint- change there so you don't keep downloading from foundation website.

TechnologyArchitectureLLC commented 11 years ago

To be more direct- find out which class it is- most likely it's "top-bar has form" enter in the breakpoint data there I'm the stylesheet.

Also, look up some CSS to change the search form...

If that doesn't work...the top-bar is divided between left and right...

u.l-left u.l-right

Hope that helps--- not at my computer right now

TechnologyArchitectureLLC commented 11 years ago

Pay close attention to class groups in stylesheet in collaborative groups for top-bar section.container.ul li and such

The divider CSS classes change layout of nav too

randomfreeform commented 11 years ago

( Hmm, action here... should I reopen the topic? FWIW - I haven't downloaded a custom build from http://foundation.zurb.com/download.php YET but I sure wish this was a easy line change in functions.php or css in Reveries build somewhere.)

TechnologyArchitectureLLC commented 11 years ago

I don't like how the dropdowns currently take half the mobile screen up when navigating (I'm thinking about jumping into the script file and making some changes if nothing else)... I have something up my sleeve that I think I'm going implement in my theme... frying bigger fish right now... custom sliders and options.php so people can use zurb's foundation without having to do all this tedious work...

randomfreeform commented 11 years ago

Personally, if the menu issues were ironed out and consistent I wouldn't have any big complaints...

(OK, I want to have full screen WIDTH div content too.. at least I'd like to do something like this http://dev.evernote.com ;)

TechnologyArchitectureLLC commented 11 years ago

Dude- lol I'm on a deadline lol - just jump in head first - seriously? look around where you're at- code inspiration everywhere-air-air-air.....

you're not going to learn any other way lol - "homework copier! Lol"

feel like I'm back in high school - just joking- ill help where I can

randomfreeform commented 11 years ago

not sure what you're getting at... but if it's the example I gave then I don't want to 'copy' it, I just want to find a way to have full window width div content anywhere in a Reverie WP page. If I made a normal html site with Foundation this would be trivial.

hauntedhost commented 11 years ago

I sure wish this was a easy line change in functions.php or css in Reveries build somewhere.

well, there is:

$topbar-breakpoint: emCalc(940px);

via: http://foundation.zurb.com/docs/components/top-bar.html

this might be the golden ticket here. but i'm not entirely sure where to place this directive, or if reverie is even respecting it.

TechnologyArchitectureLLC commented 11 years ago

I wasn't sure what you were getting at-

Try looping - reverie full width is around 1054px width

TechnologyArchitectureLLC commented 11 years ago

Try hacking custom header image in functions php and for each class each row like the header

randomfreeform commented 11 years ago

Thanks... will give these ideas or a Foundation custom build a try in a day or so...

Like I said above.. one odd thing with Reverie is that the menu style break-point is different than the grid break-point, (ie. menu style changes from the normal type to the single 'MENU' top-bar type at 'medium' 940 but the grid changes to 'small' at 769 which is just under the iPad screen res. Basically I want the menu stay normal on iPads and only use the 'top-bar' for 'small' screen smartphones.)

hauntedhost commented 11 years ago

I want the menu stay normal on iPads and only use the 'top-bar' for 'small' screen smartphones

yes this is exactly what i'm trying to accomplish as well. please let me know if you make any progress. thanks.

TechnologyArchitectureLLC commented 11 years ago

Cool. Let me know how that turns out... I may try it myself, too.

as far as the nav.. I agree... look in to building a more complex walker_nav.... and remove the dropdown class

On Mar 22, 2013, at 11:08 PM, randomfreeform notifications@github.com wrote:

Thanks... will give these ideas or a Foundation custom build a try in a day or so...

Like I said above.. one odd thing with Reverie is that the menu style break-point is different than the grid break-point, (ie. menu style changes from the normal type to the single 'MENU' top-bar type at 'medium' 940 but the grid changes to 'small' at 769 which is just under the iPad screen res. Basically I want the menu stay normal on iPads and only use the 'top-bar' for 'small' screen smartphones.)

— Reply to this email directly or view it on GitHub.

randomfreeform commented 11 years ago

so much activity... reopened.

hauntedhost commented 11 years ago

i figured it out. make two edits in css/style.css

.top-bar-js-breakpoint {
  width: 48em !important;
  ...
}
...

@media only screen and (min-width: 48em) {
    ...

randomfreeform commented 11 years ago

Yeaaaaaaaa...! Thanks somior!!! (Only played with it for a min. so fingers crossed it doesn't mess anything up on some device.)

So now my MENU changes type (from normal nav to top-nav) at the same pixel break-point that my page chanes to single column. Generally makes more sense then them being at different pixels... and it looks better on my iPad when I have a short list of menu items though it's nice to know where to change things when it doesn't. Curious what Zhen will think of all this. cheers R

milohuang / reverie

where to change mobile menu breakpoint #147

feel like I'm back in high school - just joking- ill help where I can