Foundation 6 - TopBar Whitespace nav items and underlapping navigation

[holmescreek]

Wow, been a member since '03, and my last login was in 2011. My how Sitepoint has changed.

Anyway, If this is the incorrect category, please move it, or let me know.

I’m working with Zurb Foundation 6 and always tend to have two separate 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:

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:

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

p.s. I don’t see a code icon in the editor here.

$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;
    }
}

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.

Any suggestions and help would be greatly appreciated.

[TechnoBear]

Welcome back, @holmescreek!

@holmescreek

p.s. I don’t see a code icon in the editor here.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

[SamA74]

@holmescreek

PROBLEM 1

Well it’s just a case of what fits the available space. There are a few options,depending on what you want, some better than others.
You could have the “hamburger” break point sooner, when things no longer fit.
You could make the text smaller (not good for accessibility).
You could reduce the amount of horizontal padding/margin on the links, or make those width dependant.
You could allow the links to wrap to a new line.

@holmescreek

PROBLEM TWO

Again, it’s a question of available space Vs size of elements. So I would ask: what do you want to happen when space gets too tight?

[holmescreek]

In Foundation there are predefined breakpoints such as small, medium, large. Within your html you can use classes such as medium-up, large-down. I tried creating a custom breakpoint called ‘custom’, then tried using something like custom-down.

The point is to set a custom breakpoint at 950px, once the browser width reaches 950px it switches to the mobile menu.