Foundation 6 - TopBar Whitespace nav items and underlapping navigation

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.


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:


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 :slight_smile:

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

$breakpoints: (

  small: 0,
  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) {

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.

Welcome back, @holmescreek!

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.

1 Like

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.

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?

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.