Menu icon Foundation
TopBar Help Needed for Breakpoint and iPad DropItems

I found that my TopBar Navigation Menu was not breaking soon enough, most notably on iPad portrait view. The result was an awkward wrap of the navigation menu.

I modified the Foundation CSS in two locations.

Works great except now on iPad with the toggle menu displaying, the drop menu slides completely out of view. Also the triangle is right next to and actually covering up part of the initial top level drop item.

On iPhone, all is working great. Do I need to make changes elsewhere to compensate for my change in the break point? I vaguely recall having this issue of the drop items sliding out of view on another project —but cannot remember how I fixed it.

I've inserted the original Foundation CSS, and followed each instance with how I updated it.

/*original css*/
meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 58.75em; } 
  
  /*my change to css to get toggle menu to appear sooner*/
meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:50em)/";
  width: 50em; } 
  
  /*OTHER CSS CHANGE ORIGINAL PORTION OF CSS*/
    @media only screen and (min-width: 40.063em) {
  .top-bar {
    background: #ffffff;
    
      /* MY CHANGE ORIGINAL PORTION OF CSS*/
    @media only screen and (min-width: 50em) {
  .top-bar {
    *zoom: 1;
    background: #ffffff;



         

Foundation 5topbarbreakpointDrop ItemsDrop Menu Sliding out of view.

I found that my TopBar Navigation Menu was not breaking soon enough, most notably on iPad portrait view. The result was an awkward wrap of the navigation menu.

I modified the Foundation CSS in two locations.

Works great except now on iPad with the toggle menu displaying, the drop menu slides completely out of view. Also the triangle is right next to and actually covering up part of the initial top level drop item.

On iPhone, all is working great. Do I need to make changes elsewhere to compensate for my change in the break point? I vaguely recall having this issue of the drop items sliding out of view on another project —but cannot remember how I fixed it.

I've inserted the original Foundation CSS, and followed each instance with how I updated it.

/*original css*/
meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 58.75em; } 
  
  /*my change to css to get toggle menu to appear sooner*/
meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:50em)/";
  width: 50em; } 
  
  /*OTHER CSS CHANGE ORIGINAL PORTION OF CSS*/
    @media only screen and (min-width: 40.063em) {
  .top-bar {
    background: #ffffff;
    
      /* MY CHANGE ORIGINAL PORTION OF CSS*/
    @media only screen and (min-width: 50em) {
  .top-bar {
    *zoom: 1;
    background: #ffffff;



         
Rafi Benkual almost 4 years ago
Marc McGee almost 4 years ago

Thanks Rafi. Reviewing it now.
Still concerned about the vanishing drop items. They slide out of view. I know I had this problem before, but cannot for the life of me remember how I solved.

I'll work through the examples of what people said works for them and see where I land. Thank you for providing that link.

I wish I understand SASS! Seems like it would be much easier than hunting through tons of CSS. My current system does not display line numbers so hard to target a rule unless I copy out the code and paste into TextWrangle or other editor.

Marc McGee almost 4 years ago

After reviewing the post you recommended. I followed that last entry, making a css adjustment in two locations.

Lines 1741 - 1743:

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

Line 2062
@media only screen and (min-width: 64.063em) {

Menu certainly breaks sooner now, however, the little triangle for nav items with drop is right on top of the last letters of the top level nav item. And, when a nav item with drop is clicked to view more options – the sub nav slides through and out of view.

Anyone else have this issue?

Marc McGee almost 4 years ago

I sort of solved the issue the triangle cover text & drop items sliding out of view. But now my topbar is no longer centered on desktop. I seem to be going in circles—fixing one issue and creating another.

Ultimate Goal:
Centered Top Bar
Earlier Breakpoint for smaller displays so the TopBar doesn't wrap.

nav.top-bar {
    text-align:center;
}
section.top-bar-section {
    display: inline-block;
}

@media only screen and (min-width: 40.063em) {
  section.top-bar-section {
    display: block;/*mNote: added entire rule here to center nav menu on large up*/
  }

Marc McGee almost 4 years ago

I still seem to be stuck in this weird cycle. I added !important to the following styles, and that centered the topbar on desktop. But.... now the drop menus on small and mobile slide off the page out of view again and the triangle is over in the middle covering some of the nav item text.

I don't think there is a nav.top-bar, and I've changed that in the css file. That must've been a style from an earlier version of foundation.

UNCLE!

Marc McGee almost 4 years ago

Hi Rafi:
I tried your suggestion from http://foundation.zurb.com/forum/posts/551-how-to-topbar-li-centered and it's having no affect for centering the topbar on desktop.

if I add !important to the section.top-bar-section, then the topbar centers on desktop, but then the drop menus on the smaller screen or mobile does not work. (triangle placement issue and drop items slide through and out of view).

Was working great until I started messing with the breakpoint, then everything seems to have flown apart like a dollar watch.

Marc McGee almost 4 years ago

I am at a complete loss. Basically, I had my topbar customized, centering, and the drop functionality worked perfect in small desktop AND on mobile.

Then I decided to try and fix the wrapping menu by changing the topbar breakpoint. Nothing I modifed worked. So I did a NEW custom download, and set my breakpoint to 50em. Why 50em? Because on a site I built a couple of months ago, that seemed to be the number that worked.

In following some of the discussions, the modified break point others are using is 64.063em.

  1. Could there be a conflict somewhere because I specified 50em as the breakpoint for my custom download, but am now trying to modify the css to use 64.063em?

  2. Should I start over and specify 64.063em as the breakpoint when I download?

  3. Must all of these changes to alignment occur in the foundation css? I've been trying to make then in my own css, so that if I have to get a new custom download, I don't have to go back through thousands of lines of css to inputting all of my little modifications and tweaks – though there really are not that many.

  4. Do I need to be changing something in the JS?

At this point – it might be easier for me to just get rid of one of the menu items and then I don't have to worry about the menu wrapping. I say this seriously, though I don't really have that many items. Six single-word items to be exact.

I did however modify the font size for the menu to be 1em for better readability, though I wouldn't think such a small change to the font size would be the cause of my issues.

Scenario:
I can modify the css to make the breakpoint work the way I need AND have the drop items in the mobile menu work properly BUT then the topbar on desktop is not centered.
Once I make changes that successfully get the topbar to center on desktop, then the drop items in mobile/small view slide out of view and the triangle is on top of letters of a parent nav item.

Any feedback or tips greatly appreciated.

Rafi Benkual almost 4 years ago

Is this what you're trying to make? http://codepen.io/rafibomb/pen/PwzgVK?editors=110

Not sure what you mean about the topbar not being centered? The list items or the whole nav?

I made this top-bar, changed the two media queries to 60em and it works great. What other changes have you made?

Marc McGee almost 4 years ago

Hi Rafi:
Yes. That's what I want. I've done it before on another site, but that was prior to the topbar breakpoint becoming an issue with iPad.

I was away from the project for a many days, but plan to jump in tomorrow and re-review all of my code. As with many things, there probably one simple thing I have overlooked that is causing a conflict.

Will post back tomorrow what I find out.