Menu icon Foundation
toggle-topbar menu-icon collapsing prematurely in tablet mode

Hi there,

I'm just starting out on Foundation (& web development in general).
I have run into a problem where my (web) novice brain haven't been able to solve, and was wondering if some one more experienced could lend a hand?

I've coded a toggle-topbar with a menu-icon but it seems to be collapsing prematurely when the browser has tablet resolutions. I was expecting it to collapse when it hit the smartphone resolutions per my understanding of how it works.

line 33-36 of the attached code has the definition for the menu-icon.

Background :
I have the latest Foundation code installed a couple of days ago.
I've tried disabling any css scripts, but that didn't help.
I haven't defined any css code that touches the toggle-topbar or menu-icon.

Thanks for reading this post & extra thanks if you can pinpoint the error.

toggle-topbar

Hi there,

I'm just starting out on Foundation (& web development in general).
I have run into a problem where my (web) novice brain haven't been able to solve, and was wondering if some one more experienced could lend a hand?

I've coded a toggle-topbar with a menu-icon but it seems to be collapsing prematurely when the browser has tablet resolutions. I was expecting it to collapse when it hit the smartphone resolutions per my understanding of how it works.

line 33-36 of the attached code has the definition for the menu-icon.

Background :
I have the latest Foundation code installed a couple of days ago.
I've tried disabling any css scripts, but that didn't help.
I haven't defined any css code that touches the toggle-topbar or menu-icon.

Thanks for reading this post & extra thanks if you can pinpoint the error.

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

You can change the default breakpoint for top-bar. It has it's own breakpoint because some menu's contents may need to break before the content does.

You'll see how in this post: http://foundation.zurb.com/forum/posts/1053-changing-topbar-breakpoint-using-css

Francis Chung over 4 years ago

I'm afraid it didn't quite work.
I tried inserting new CSS code from the link you posted into my override.css but it looks like it has no effect.

Thanks for the help

meta.foundation-mq-topbar {
    font-family: "/only screen and (min-width:55.125em)/";
    width: 55.125em;
}

@media only screen and (min-width: 55.125em) {
    .top-bar {
        background: #333333;
        *zoom: 1;
        overflow: visible;
    }
}

Rafi Benkual over 4 years ago

You can edit the CSS file directly. Worked for me on 5.5.2 just now.

Francis Chung over 4 years ago

Looks like changing the code in Foundation.css has the desired result.

Would be good to be able to solve it from another css file, but thanks for the solution regardless.