Hello,

Not sure if I should be in tech support, however, I have an issue where the navigation link buttons disappears when I go from portrait to landscape (Widescreen) on my phone when testing my website..

The Portrait view with the square Link icon (Mobile Menu Toggle Button) has to be open with the drop down showing the links first in order for the landscape (widescreen) to show the link buttons in the horizontal bar. I know, may sound a bit confusing.. lol..
Anyhow, just know that the horizontal nav bar I have with 5 link buttons disappears in widescreen when I turn the phone from portrait view to widescreen if the Link Icon (Mobile Menu Toggle Button) is closed in portrait view.

Not sure what is causing this. If it sounds confusing what I am trying to explain I can possibly show a short video of what I am stating.

Also, If the widescreen orientation view is refreshed the nav menu will re-appear.

Thanks.

Hi hotwire,
Sounds like a styling issue at a break point near the landscape mode for your device.
Can you share a link to your site so we can confirm this.

Hello Eric,

It appears the Mobile Menu Toggle Button possibly retains the display; none value when it is retracted..

Got this information from the internet. Here is the info:
"When you use the .slideUp() function the display property of the element is set to "none". So your .nav-menu keeps "display: none;" after you close your mobile menu. This makes the menu stay hidden after you resize the browser window to desktop size."

This is my test website you can check it out and see what I am explaining.. It only disappears if the Mobile Menu Toggle Button is used. If it is not retracted, the horizontal menu will work, but once retracted it doesn't.

website: snp.coffeecup.com

Thanks

What device are you viewing it on? The menu slides in from the left for me when I click on the menu button in landscape mode on Iphone 6.

works for me on android phone landscape
click on the menu hamburger thingy, the menu slides in click on it again the menu slides out

on my wife tablet in landscape mode, just the main menu appears no need for hamburger

I would say that because the menu that slides in is set to relative, and the top margin set to something higher than 3 or 4 pixels, then on landscape mode only the top menu item shows, maybe if your phone isn't high enough viewport when in landscape mode, the menu is actually working but you cant see it because it's under the fold so to speak

I noticed the jump also.

Hi Eric,

excuse the late reply, yes the menus are ok if only using one orientation size (Landscape/Portrait), the problem is if you are in portrait mode and turn your device to landscape mode the menu will disappear. I understand in most cases a person may not always turn their device from one orientation to another on a regular basis, but it does happen.

So, if you take your device and load the webpage, (Doesn't matter which orientation), but for my explaining purpose let's say we load the page in portrait, click on the hamburger menu to open it, then click again to close it, now turn the device to landscape orientation, you will notice the horizontal landscape menu is gone..

At least that is what I notice on my android and on my desktop by simulating sizes on the screen. And keep in mind this only happens going from portrait to landscape and also only if the portrait Button Menu has been opened and closed.

Thanks for your time and help on checking this.

Hey Eric, here is about a short gif I did on my desktop showing the issue, however, same behavior exists on my mobile devices. It will do the same as I explained in the last message.. Thanks.

the file I am attaching is menu_issue.gif

by the way I tried it on my daughter's iphone8 to verify that it's just not on an Android user, like myself, phone only.. lol.
If the gif is too hard to view, let me know if I can send you another format some way.

You could try putting some CSS in your page header

<style>
@media screen and (min-width: 40rem) {
.menu-wrapper {
display: block !important;
padding: 0;
border-width: 0;
}
}
</style>

as for changing widths on a desktop downwards, that's quite normal to have to refresh the browser

Hi Wayan,

Thanks for the help, you and Eric.. Ok, I think I saw something like this on the Internet with people having similar issues of disappearing nav bars (Menus etc).

And this is not major for me, but it is something i would like to have a handle on for future sake. lol.. It appears to have, and has, been an issue I see with particular foundation structures.. I am kindof just getting back into this web stuff after having some medical issues over the past years. Anyhow, I hope this issue is something worth while and I am not just left far behind on something like this.. lol.

Now, as to your suggestion, Am I correct that Foundation Framer don't allow direct code editing??

I do have other software I can use to add this CSS, however, not sure exactly where to find it.

My Bad.. I see you stated in the Header, I will try this. . Thanks.

Thanks for your help.