Foundation 4 top bar menu does not appear for most browsers

[samueller]

I've seen this issue a bunch of times where the drop down menu in the top bar at mobile width sizes doesn't appear. You click on those 3 bars to the right of "Menu" and nothing happens. Now we have a live site, but only Firefox seems to work when you make the window narrow. Most importantly mobile Safari doesn't work at all. I seem to be doing everything right according to the Foundation docs. Site is here: http://www.mustangvball.com/

[wimogas]

Same! I don't even see the 3 bars... http://ingles.babylon-idiomas.com/aprende-ingles/

[Stolz]

Same here

[RobertinoValue]

@samueller I cannot reproduce what you describe. Did you resolve the issue you had?

@wimogas Because you did not specify the HTML to toggle the topbar, nor the HTML for the button.

Between <nav class="top-bar" style="padding-bottom:0;margin-bottom:0;"> and <section class="top-bar-section"> You need to add something similar to the following :

  <ul class="title-area">
    <!-- Title Area -->
        <li class="name">
          <!-- <h1><a href="#">Top Bar Title </a></h1> -->
        </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

Also, no matter what, the width of your topbar seems fixed. It doesn't become narrower when the browser window is re-sized down.

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

[samueller]

@RobertinoValue you can't reproduce because we fixed the issue. It was 2 parts. One was that we had tables with fixed widths in the body of the page. We used percentage widths instead and that fixed the problem for the most part. However, between the browser window widths of 765px and 939px, the menu would still not drop down. That's because of Rails' default scaffolds.css. In it, the font-size was set to some value. When we removed that, everything worked perfect.

Seems that top-bar menu button is very finicky!

[RobertinoValue]

@samueller Yeah thought so. The top bar looked pretty OK to me when I visited. Yes the hamburger menu button is finicky. It often disappears if you remove or comment the entire li item before it (with the class name). But when you just comment the h1 within that same li item it shows.

[zurbrandon]

Looks like this has been resolved, so i'll close this for now. Reopen if you're still having an issue.

[chrisb1]

Hi zurbrandon and RobertinoValue, I have the same issue and have been scouring the web for answers... and nothing seems to work. I'm redesigning an old site to be responsive and chose Foundation 4. The menu works fine (after some early issues) on wide screens, but the MENU icon and bars no longer open up the menu on phones or tablets. The site is all local on my Mac, so it's difficult to illustrate. It was working then has just stopped. Seems a lot of people have this issue and I'm wondering if there is a definitive explanation somewhere on what's going wrong with the menu. Any pointers to a step by step guide to diagnose and resolve these issues? Many thanks

[vinayraghu]

Hi @chrisb1 can you try and check if your topbar-breakpoint variable is set in em? This issue was resolved for a lot of people by removing emCalc and specifying and exact px value. Try and let me know

[chrisb1]

Hi Vinay,

Thank you so much for getting back to me. Really appreciated.

I'll check that, but if I recall correctly, I think the topbar breakpoint is in em units and not pixels. It's 11:15 PM and I have work in the morning, so it will be tomorrow afternoon/evening before I can check. I'll let you know if that sorts the issue as soon as I can.

Thanks again, Vinay. Fingers crossed that it will work!

All the best,

Chris

On 8 September 2013 22:37, Vinay Raghu notifications@github.com wrote:

Hi @chrisb1 https://github.com/chrisb1 can you try and check if your topbar-breakpoint variable is set in em? This issue was resolved for a lot of people by removing emCalc and specifying and exact px value. Try and let me know

— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/2829#issuecomment-24030081 .

Chris Breen

Email: chrisbreen1@gmail.com Mobile: +44 (0)7970 470105 Home: +44 (0)1246 251056

[vinayraghu]

Yeah, the em units showed up a lot of issues because the top-bar wasn't contracting at a specific point. I faced the same issue myself. Do login tomorrow and try it out. Am hoping this should solve it for you.

[chrisb1]

Hi Vinay,

I really thought that was going to work, but I replaced the following lines with the breakpoint shown in ems...

Line 2995 top-bar-js-breakpoint { width: 58.75em !important; visibility: hidden; }

Line 3002 @media only screen and (min-width: 58.75em) { .top-bar {

And in both cases I replaced 58.75em (which came as the default in foundation.css) with 768px

Disappointingly, the menu still doesn't open when the drop-downs disappear to be replaced by the three line icon. I click and click but it's still dead. Arghh!

In my app,css I previsouly put in code to reduce the h1 size of the title line so that the one line of text fits neatly on a phone screen, even in portrait:

/* Mobile styles */ @media only screen and (max-width: 600px) {

h1 { font-size: 2.125em; }

} @media only screen and (max-width: 500px) {

h1 { font-size: 1.6875em; }

} /* Mobile styles */ @media only screen and (max-width: 400px) {

h1 { font-size: 1.375em; }

}

This couldn't be causing an issue, could it?

Do you or anyone else have any other ideas? I want to avoid starting from scratch but without functioning navigation the site is... well, useless.

All the very best, Chris

[vinayraghu]

Please can you provide a jsfiddle or codepen on this?

[chrisb1]

Hi Vinay, I gether that means you're asking the guys at Zurb/Foundation to provide this jsfiddle... or code to get round the issue. We've not had anything back have we, unless they have a direct email for you? Can you please let me know what a codepen is? Best, Chris

[vinayraghu]

No Chris, I actually meant to ask you if you can upload the code to either of these websites, so I can have a working example of the issue you're facing. Both codepen and jsfiddle websites allow you to post your html/css/js and view the result online. Its an easy way of sharing issues such as the one you are facing.

[chrisb1]

Ah! Sorry, I misunderstood. Thanks Vinay, I'll look into those sites and upload the template page. I checked Web Inspector on Safari looking at my Template and index pages, and the js files don't seem to be loading. That might be the issue.

Can you advise on the the source text for all of these?

I have at the bottom of my html page:

<script>

document.write('<script src=' + ('proto' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>')

And none are loading.

I looked on line and someone suggested writing as <script src="/js/foundation/foundation.topbar.js"> (with a / in front of the js folder.)

Which is right to access the folders locally, or is there a better way of writing it that survives intact for uploading on the server?

All the best,

Chris

On 11 September 2013 17:25, Vinay Raghu notifications@github.com wrote:

No Chris, I actually meant to ask you if you can upload the code to either of these websites, so I can have a working example of the issue you're facing. Both codepen and jsfiddle websites allow you to post your html/css/js and view the result online. Its an easy way of sharing issues such as the one you are facing.

— Reply to this email directly or view it on GitHubhttps://github.com/zurb/foundation/issues/2829#issuecomment-24254556 .

Chris Breen

Email: chrisbreen1@gmail.com Mobile: +44 (0)7970 470105 Home: +44 (0)1246 251056

[chrisb1]

Hi Vinay,

I'm really not sure I've done this right - or I've gone to the right website! - but the bare bones of my template page have been copied over to here:

http://jsfiddle.net/chrisb1/Gvw5W/

Obviously the graphics aren't there and it is just a rough layout with my app.css copied into the CSS window, but it should show the issue I have with the Menu not functioning.

If you check my html page you'll see how my Foundation js files are listed. None of these are loading on Safari Web Inspector, so there could be an issue (THE issue?) there.

Any insight into where I've gone wrong would be greatly appreciated. Everything was working fine two or three weeks ago and then, suddenly, no menu on small screens.

All the best,

Chris

[seantimm]

@chrisb1 You are attempting to initialize the Foundation libraries before you've loaded them. If you look in your console, you're probably getting a javascript error. The following lines needs to be below the rest of the scripts:

  <script>
    $(document).foundation();
  </script>

[chrisb1]

@seantimm Thanks so much for this tip, Sean. My putting that js ahead of the Foundation libraries has certainly not helped, but it still hasn't freed up my navigation to work again. There's another error I've made somewhere. as well.