Menu icon Foundation
Help with Top Bar and media query issue

Hello,

I am working on a website using Foundation 5 Top Bar. And cannot figure out this problem I am having with the media queries. My site is supposed to reveal the mobile hamburger icon format for small screens but should display a basic tab-style format for medium screens on up. The problem is that when my browser window is expanded over 89em (x-large screen?), the Top Bar reverts back to mobile format. I looked in the Foundation css to confirm that the Top Bar media query is @media only screen and (min-width: 40.063em) and have looked for css conflicts . Does anyone know why this might be happening and may be able to provide a solution? I really need to fix it and need some help. My site is here if it helps to take a look. Thank you.

www.corpakms.net

top barmedia queryx-large screen

Hello,

I am working on a website using Foundation 5 Top Bar. And cannot figure out this problem I am having with the media queries. My site is supposed to reveal the mobile hamburger icon format for small screens but should display a basic tab-style format for medium screens on up. The problem is that when my browser window is expanded over 89em (x-large screen?), the Top Bar reverts back to mobile format. I looked in the Foundation css to confirm that the Top Bar media query is @media only screen and (min-width: 40.063em) and have looked for css conflicts . Does anyone know why this might be happening and may be able to provide a solution? I really need to fix it and need some help. My site is here if it helps to take a look. Thank you.

www.corpakms.net

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

Swaranan Singha Barman over 4 years ago

change @media only screen and (min-width: 40.063em) to @media only screen and (max-width: 40.063em)

i think it will work..

Eileen Schmidtke over 4 years ago

Thanks Swaranan, I tried that. I wrapped the mobile css in @media only screen and (max-width: 40.063em) and the regular screen css in @media only screen and (min-width: 40.063em). It doesn't seem to affect the page at all. I did this in the foundation.css file. All go the other foundations styles are fine so I know the css files have been enqued correctly. But it appears to be ignoring the media queries.

I tried removing any possible conflicting css files. Im pulling my hair out. any other ideas?

Eileen Schmidtke over 4 years ago

I got it! Thanks again Swaranan. The problem was my use of visibility classes in the nav sections. Appreciate your effort on this. Thanks again.