Menu icon Foundation
Tablet sized topbar dropdowns not working

Hi everyone. Drew emailed us a question about the topbar. Lets collaborate and help out! Thanks!

==

Hello,
I am setting up a website using Foundation and everything was easy and fun to code, but on my nav, in the top-bar top level links for drowpdowns, the tablet browser does not activate the top level link. It works fine on all other sizes as do the dropdown links. Any idea what might be going on here? This problem only exists for browser sizes between 808 and 822 pixels wide. There is probably some setting in my css that needs to be slightly adjusted and I just thought I would check with you. I saw similar issues in the support forums, but nothing that worked for me. (Unfortunately, I don't have it online yet outside our network so others can access it.)

Thanks for any help!

topbarnavdropdownslinksmobileipadtablet

Hi everyone. Drew emailed us a question about the topbar. Lets collaborate and help out! Thanks!

==

Hello,
I am setting up a website using Foundation and everything was easy and fun to code, but on my nav, in the top-bar top level links for drowpdowns, the tablet browser does not activate the top level link. It works fine on all other sizes as do the dropdown links. Any idea what might be going on here? This problem only exists for browser sizes between 808 and 822 pixels wide. There is probably some setting in my css that needs to be slightly adjusted and I just thought I would check with you. I saw similar issues in the support forums, but nothing that worked for me. (Unfortunately, I don't have it online yet outside our network so others can access it.)

Thanks for any help!

Rafi Benkual almost 6 years ago

Hey Drew,

Since you cannot send a link, can you post your code? That way we can test and see what is happening. Thanks!

Melrose about 2 years ago

I have a similar issue (with F5, yes need to update to F6). I was able to get the "hamburger" menu icon to appear at an earlier break point, due to unwanted navigation wrapping under the logo (tablets, portrait). Using the below in my main css, changed 62 from 64 because at 1024 x 768 don't want the menu icon to show, since navigation looks fine until 993.

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

However, I'm now having troubles getting the mobile dropdown to appear in that earlier breakpoint. The menu icon is clickable, but I need it to show the same styling dropdown as mobile.

Any advice on this is greatly appreciated.

Thanks in advance!

PS. Don't have code to show, since website is private at the moment, til pushed live.

kasper1 over 1 year ago

 Now almost all children use gadgets from a very young age and there's nothing wrong with this, if you are looking to save on buying new gadgets, you can look at the prices at http://www.china-prices.com/brand/152/xiaoomi is an excellent resource for choosing the right price.