zurb foundation 6 topbar help creating custom breakpoint?

Question

I'm working with Zurb Foundation 6 and always tend to have two separate (and reoccurring) issues with the TopBar when it comes to navigation items.

PROBLEM 1

The first issue, in the first example, is whenever I use whitespace in navigation items such as"FOR SALE" on an expanded navigation menu, when the width of the browser is reduced the words stack on top of each other.

I tried adding a white-space:nowrap;, hover when the screen width is reduced the navigation text starts breaking out of its container.

Here is an example of this problem on codepen, with the nowrap added to the css just resize your browser width:

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

PROBLEM TWO

The second problem I always seem to have is that if I create a logo on the left of the screen, then put my navigation in top-bar-right, whenever the width of the browser is reduced the navigation will stack under the logo until it hits a breakpoint.

here is a link to this codepen:

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

I tried to create a custom breakpoint in the settings.scss file such as:

$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;
Then I modified the .title-bar and use the custom breakpoint like so:

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

If I use classes such as "hide-for-large" using the pre-defined breakpoints these work fine.

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 this fails to work.

Any suggestions and help would be greatly appreciated.