Problem with Top Bar-Stack


I’m having a problem with the TopBar-Stack. I made these settings:

When I change the width of the window, then it does not change automatically to the mobile menu. Between the width 950 px to 640 px the menu is not visible, then it changes to the mobile menu.

you can look here:

Any ideas how to avoid this?

Regards and thank you

@HGBM - is it because you have it “contain[ed] within body?”

Ok, this is like it looks when I place the header image and the Top Bar above:

Hm, always not the result I like.

But, does it shrink/grow properly?

First, remember this

Is not how true responsiveness works.

Next, set the Full Menu setting to custom and set it to the width that the menu goes below TopBar

I can confirm that when the site logo/title/slogan are visible, the menu does not show up in tablet portrait mode (using RW’s Preview mode settings) when Top Bar is set to default settings. @HGBM, @zeebe

When the site logo/title/slogan are not visible, at least with the menu items I had, there was no issue with the menu displaying properly.

Further, switching the menu from static to fixed displays the menu items - under where the logo/title/slogan appear.

This is happening because you have too much content in your Top Bar stack, and unless you use custom breakpoint, there really is no fix.

Ok, changed the hierarchy of the menu, much better now. But I think, that Foundation should act more clever and change the menu automatically.

I set the breakpoint to 750 px, I think, that it should be visible here:

Any idea?

Ah, I see… @HGBM set your “Full Menu at” to Custom, then set the breakpoint to 769 (or the minimum size your menu fully displays) and then you’ll have the triple-bar menu indicator below that breakpoint. :smiley:

Thanks @zeebe! :smile:

A little confused here, so you are saying that you set the breakpoint for 750 and expect to see the full menu at 655?

No, but the mobile menu-button

I am seeing the mobile menu at 655, see my screenshot. You can tell my screen is that size as in responsive-resize extension in Safari, I set it to 655.

Ok, than the preview in RW don’t work exactly. The screenshot was made in RW, not with Safari or Firefox.

Are you sure you were at that size, because from 750 to about 962 or so, your site will look like your image, with the full menu and it below the topbar color

See here:

Weird, not sure what to tell you, but it is working on your site without issue. I will let Joe know about this, but it almost sounds like a RapidWeaver issue.

I had to set my breakpoint to 890 otherwise the menu misbehaved until the lower breakpoint was reached.

Was there ever any resolution to the Top Bar issue. Mine was so unruly I ended up ditching the foundation based site and went with another acceptable theme until I can get some resolution on the Top Bar issues…

Looks like one of the updates must have fixed this issue, you can see here:

I think there are still issues, I made the switch to a non foundation site within the last week. Images don’t work at all, at various points during resizing a page the top bar simply disappears. I was really struggling with it and had to abandon it to get the site done…