Menu icon Foundation
Topbar Dropdown menu not working

I have been unable to get the topbar dropdown menu to work.. It also doesn't work on the zurb documentation page. Since I can't find a working demo, it is kind of hard to make it work on my site.

I have a few example links. The first example is using foundation 5 on my live site. Please hover over About, then shrink the browser to small to see the expected behavior

http://www.takingbackground.com

That is what I expected to see.

The same exact code using foundation 6 looks like this..

http://devsite.takingbackground.com

So I created a test page using the exact code from the documentation site and it looks like this..

http://devsite.takingbackground.com/test.php

Then the example on the documentation site is just as broken as my test page.

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

Hover over "One" to see the problem.

It also does not collapse and show the menu icon when shrinking my browser.

Has anyone been able to get the foundation 6 topbar menu to behave like the foundation 5 menu?

I do not have SASS or SCSS so I have no idea how to style the topbar or menu using css only.

topbar dropdown menu

I have been unable to get the topbar dropdown menu to work.. It also doesn't work on the zurb documentation page. Since I can't find a working demo, it is kind of hard to make it work on my site.

I have a few example links. The first example is using foundation 5 on my live site. Please hover over About, then shrink the browser to small to see the expected behavior

http://www.takingbackground.com

That is what I expected to see.

The same exact code using foundation 6 looks like this..

http://devsite.takingbackground.com

So I created a test page using the exact code from the documentation site and it looks like this..

http://devsite.takingbackground.com/test.php

Then the example on the documentation site is just as broken as my test page.

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

Hover over "One" to see the problem.

It also does not collapse and show the menu icon when shrinking my browser.

Has anyone been able to get the foundation 6 topbar menu to behave like the foundation 5 menu?

I do not have SASS or SCSS so I have no idea how to style the topbar or menu using css only.

Brett Mason about 4 years ago

Hi Les

The components in Foundation 6 are a lot more modular, so to make up the topbar as per your example you actually don't want to use the Foundation 6 topbar component at all. It may look more complicated but its a lot more flexible.

You have 3 components in use here - title bar, dropdown menu and drilldown menu. I would normally do this with Sass, but as you don't use that here's a codepen for you: http://codepen.io/brettsmason/pen/LGYLYy

Let me know how you get on!

Les Fenison about 4 years ago

Wow, that is much simpler, maybe you should add that to the docs page.

The only problem is that I can't get the contain-to-grid to work. Should I be using something else instead?

Les

Brett Mason about 4 years ago

There's no contain-to-grid class in Foundation 6, but you could just add a .row container around it which should have the same effect (thought I haven't tested that).

Les Fenison about 4 years ago

I added a div row, then a div medium-12 column and that worked.. The only other thing that isn't working is sticky.

I followed the instructions in the docs for sticky and it almost worked except it stops working after you scroll more than the browser height. Also, it adds a margin that keeps it away from the top.

I am looking for something more like the behavior.in this example...

http://www.takingbackground.com/topics.php

The image on top of the top bar scrolls away and the topbar sticks to the top of the browser no matter how far you scroll.

This was on of my favorite features of foundation 5 and I am hoping it is possible with 6.

Les Fenison almost 4 years ago

Hey Brett, Your example menu only works on pages that have no content. If you add content to the page and shrink the browser to small, it puts a HUGE vertical gap between the menu and the content. Here is my example.

http://devsite.takingbackground.com/test4.php

Also, .sticky does not work as it did on foundation 5. There is no way to make the menu stick to the top of the browser..

You can also see this behavior by putting enough text in your codepen example and it will do the same thing.

Brett Mason almost 4 years ago

Hey Les

I think the huge vertical gap you mention might be a bug - its the height of one of the submenu lists.
Also I think the sticky behaviour is a bit buggy and doesn't fully work for this yet. You can see a demo here: http://codepen.io/brettsmason/pen/adbYXV

The work around is to set the topbar to be 100vw, as % based values don't seem to work quite right yet.

Les Fenison almost 4 years ago

Hey Brett...

I wasn't using topbar, I was using the example you gave me via codepen http://codepen.io/brettsmason/pen/LGYLYy

I found a way to fix the huge gap by wrapping it in a div and setting the max-height but still couldn't get sticky to work.

I am getting the feeling that foundation 6 isn't full ready for production yet so I guess we are stuck with foundation 5 for now. I thought it was officially released but it appears to be beta/alpha still.

Brett Mason almost 4 years ago

Sorry Les replied in a hurry and forgot we weren't talking about topbar... :)

Have a look here: http://codepen.io/brettsmason/pen/LGYLYy

From what I've learnt about using the sticky plugin is to anchor it to the main container on your page - this makes it stick correctly. However as mentioned above the % width issue happens, so setting the sticky div to be 100% seems to work.

Les Fenison almost 4 years ago

Wow, that is getting very close.. Only one problem left...

I added a row around it so it would be contained to the grid and it works until I scroll and sticky takes over and suddenly, the gutters turn white. Maybe gutters is the wrong term, but the sides outside the grid turns white. Even if I style the sticky container to be the same color as the bar it still does it.

Here is my example

http://devsite.takingbackground.com/test7.php

Les Fenison almost 4 years ago

Disregard my last post.. I found the answer.. Both the sticky-container and the sticky-nav divs need to have the background color set and now it works perfectly.

Thanks for your help.