Menu icon Foundation
Foundation 6 - Top Bar and Menu Items With White Space

I have a question related to Top Bar and menu items that have white space when scaling a browser.

 

I've included a codepen example to demonstrate better the issue:

https://codepen.io/floridapctech1/pen/MvaKrQ

 

If you will notice, in the CSS that I used white-space:nowrap, in the dead center of the menu you'll see an item labeled WHITE SPACE.

 

If you'll go to the pen, above, and start scaling the width of your browser, you'll notice that the WHITE SPACE item will start to "push-through" its right border.

 

What I'm trying to achieve is:

1. Have menu items like the "WHITE SPACE" example keep the text on one line. (thus white-space:nowrap)

2. As the width of the browser grows smaller, instead of the menu item "WHITE SPACE" pushing through its border (or wrapping if you remove the white-space:nowrap css), simply have the menu switch to the mobile hamburger menu.

 

Any help with this?

white-spacewhite spacetop barnavigationResponsiveoverflow

I have a question related to Top Bar and menu items that have white space when scaling a browser.

 

I've included a codepen example to demonstrate better the issue:

https://codepen.io/floridapctech1/pen/MvaKrQ

 

If you will notice, in the CSS that I used white-space:nowrap, in the dead center of the menu you'll see an item labeled WHITE SPACE.

 

If you'll go to the pen, above, and start scaling the width of your browser, you'll notice that the WHITE SPACE item will start to "push-through" its right border.

 

What I'm trying to achieve is:

1. Have menu items like the "WHITE SPACE" example keep the text on one line. (thus white-space:nowrap)

2. As the width of the browser grows smaller, instead of the menu item "WHITE SPACE" pushing through its border (or wrapping if you remove the white-space:nowrap css), simply have the menu switch to the mobile hamburger menu.

 

Any help with this?

Rafi Benkual about 2 years ago

Seems like the same question s your other post. You can create a custom breakpoint for your menu and use it with title bar. Or you can use media queries to show and hide the mobile menu bar. Again both of these options use title bar.

holmescreek about 2 years ago

Yeah, the first post was flagged as spam and I couldn't go back and copy and paste then revise it in a new post (figured something I wrote set off the spam filter).

---

Anyway, my question about breakpoints applies to both posts, the first about topbar underlapping  and the second about navigation items with white space, so I'll just combine the two here.

I can change my $medium breakpoint setting, for instance to 950px, and things like medium-up, medium-only, etc work fine.

However, I tried adding breakpoint called "custom", but things like data-hide-for="custom" or "custom-up", "custom-only", etc., won't work. This would seem the most logical way to set a custom breakpoint.

 

$breakpoints: (

  small: 0,
  tiny:460px,
  medium: 640px,
  custom: 950px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

$print-breakpoint: large;
$breakpoint-classes: (small tiny custom medium large);

...
...

// 37. Top Bar
...
$topbar-unstack-breakpoint: custom;

 

It seems that defining a "custom" size, I should be able to use things like data-hide-for="custom", "custom-dropdown", etc., in my html, but it fails to work.

 

I also tried things like :

 

 

.title-bar {
    @include breakpoint(custom) {
        width:950px;
    }
}