Menu icon Foundation
Topbar Menu Disappears Between 640px-768px

I'm having a weird issue with the topbar. When I resize my browser to be between 640px and 768px wide, the menu in the topbar disappears. The bar itself is still there, as is the logo, but the menu is gone. When I resize above 768px, the menu bar appears as normal. When I resize below 640 px, it collapses to the mobile menu (which is what I want it to do). Anyone know how I can fix this?

This is the site: http://uicstl.com/

EDIT: I took another look and realized that the menu isn't disappearing, it's just being pushed down. How can I get the menu and header to display correctly between these sizes? Is there a way to force the topbar to change to mobile at 768 instead of 640?

topbarmedia querybreakpointmenu

I'm having a weird issue with the topbar. When I resize my browser to be between 640px and 768px wide, the menu in the topbar disappears. The bar itself is still there, as is the logo, but the menu is gone. When I resize above 768px, the menu bar appears as normal. When I resize below 640 px, it collapses to the mobile menu (which is what I want it to do). Anyone know how I can fix this?

This is the site: http://uicstl.com/

EDIT: I took another look and realized that the menu isn't disappearing, it's just being pushed down. How can I get the menu and header to display correctly between these sizes? Is there a way to force the topbar to change to mobile at 768 instead of 640?

Megan Carroll about 5 years ago

I just wrote a media query for 641px-768px and adjusted some things there. It would be nice to figure out a way for the site to automatically collapse to mobile when the space in between the menu items (on the right) and the logo (on the left) no longer allows them to sit on the same line. Not quite sure how to do that, so I just changed the padding on the menu for now...