diff --git a/src/__tests__/scss/__snapshots__/styles-test.js.snap b/src/__tests__/scss/__snapshots__/styles-test.js.snap
index aa58bf389..33e08341a 100644
--- a/src/__tests__/scss/__snapshots__/styles-test.js.snap
+++ b/src/__tests__/scss/__snapshots__/styles-test.js.snap
@@ -13567,9 +13567,8 @@ li.bx--accordion__item--disabled:last-of-type {
transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
position: relative;
display: flex;
- height: 2rem;
align-items: center;
- padding: 0.25rem 0.25rem 0.25rem 2.5rem;
+ padding: 0.5rem 0.25rem 0.5rem 2.5rem;
color: var(--cds-text-01, #f4f4f4);
cursor: pointer;
text-decoration: none;
diff --git a/src/components/Nav/Nav-story.js b/src/components/Nav/Nav-story.js
index 64a54cd1e..27dbbb039 100644
--- a/src/components/Nav/Nav-story.js
+++ b/src/components/Nav/Nav-story.js
@@ -10,43 +10,88 @@ import React from 'react';
import { components } from '../../../.storybook';
import { Nav, NavItem, NavList } from '../..';
+import { commerce } from 'faker';
const { name } = Nav;
-storiesOf(components(name), module).add(
- 'Default',
- () => (
-
-
-
- ),
- {
- info: {
- text: `Basic implementation of the '${name}' component.`,
- },
- }
-);
+storiesOf(components(name), module)
+ .add(
+ 'Default',
+ () => (
+
+
+
+ ),
+ {
+ info: {
+ text: `Basic implementation of the '${name}' component.`,
+ },
+ }
+ )
+ .add(
+ 'Long NavItem test case',
+ () => (
+
+
+
+ ),
+ {
+ info: {
+ text: `Basic implementation of the '${name}' component.`,
+ },
+ }
+ );
diff --git a/src/components/Nav/_mixins.scss b/src/components/Nav/_mixins.scss
index 5e61e608f..338727f67 100644
--- a/src/components/Nav/_mixins.scss
+++ b/src/components/Nav/_mixins.scss
@@ -184,9 +184,8 @@
position: relative;
display: flex;
- height: $carbon--spacing-07;
align-items: center;
- padding: $carbon--spacing-02 $carbon--spacing-02 $carbon--spacing-02
+ padding: $carbon--spacing-03 $carbon--spacing-02 $carbon--spacing-03
$carbon--spacing-08;
color: $text-01;
cursor: pointer;