My Navbar at www.petersonsocialmedia.com works fine in all modes but one. Desktops, laptops and tablets are fine. Phones are fine in portrait mode but in landscape mode both the title and the drop down menu that displays the other pages disappears. I’ve been through the Navbar settings but can’r find a setting that remedies the issue. Thoughts?
What is happening is you must have it set to full menu Tablet+, I would suggest full menu desktop+ (or desktop only forget the setting), or if you want, make a custom setting and put it at 780 or so, I notice at 768, you get the result that @Oscar shows on a on iPad. This should fix the issue for you.
In the settings of the Top Bar is a breakpoint of 600px (Full Menu at: Custom).
Change this to 690px.
Now, there is no longer a blank area in the navigation from 600 to 690px.
… perhaps, you must change the setting differently.
On your website, there is a blank area in the navigation from 640 to 985px !?
Or you set "Full Menu at:"to Desktop. With this setup, the navigation is here on the iPhone 6.
Thanks for all the help gang. Have made a number of changes suggested to no avail. Here’s what I can report.
iPhone 6 portrait - Fine
iPhone 6 landscape - No navbar menu
iPad landscape - Fine
iPad portrait - No nabber menu
Laptop/Desktop: Fine
@sepeterson
You have always a blank area in your navigation, between a width from 640 to 999px. I don’t know why.
Full Menu breakpoint 690px can not work for you.
Change the width of the browser window and you see this.
In the new safari 9.0.1, you have an option “Mode: Responsive Design”, when you have activated menu Developer.
Have you tried the setting in my last posting, “full menu at:” Desktop ?
…and why do you hide this stack on Desktop?
It is a simple matter of breakpoints. The TopBar menu items are wrapping onto a second line (which you cannot see as they are the same colour as the white background) at approximately 1000px.
As @Oscar says above - you should not need to use the built in Stacks responsive settings at all. The Foundation breakpoints are sufficient.
I also notice that you have a 30px white border around your 1 column stack. You should not need to do this, just use the row padding settings in the stack and the white page background will show through. This will be much easier to handle responsively as I a 30px border on a small screen will take up a lot of the screen width.
Below is a link to a video showing you what is happening. I have made your page background a grey colour so that you can see the menu items wrapping to the second line as they run out of space. I hope this enables you to visualise what is happening a bit more easily.
Top Bar resizing video: https://infinit.io/_/3mxcDfz
1 Like
Thanks for all the help gang. I’m reviewing the video and taking off the responsive settings as well as other suggestions now and will report back.
@Oscar and tav, et al. I can’t thank you enough. Everything is working as expected now and I learned a lot in the process. I have to say the Realmac community is among the very best I have encountered. Smart, prompt and so giving of your time. Your guidance not only with this snag I hit but a number of others I encountered since I started using the product only a few months ago has been a joy. Thank you, thank you, thank you!
1 Like
My pleasure 
Happy new year!