Skip to content

Commit

Permalink
docs(README): Amend formatting on README.
Browse files Browse the repository at this point in the history
  • Loading branch information
jayfreestone committed Jun 13, 2019
1 parent 6dc18d5 commit 06ca1f6
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -242,33 +242,33 @@ Simply add a rule that causes the first item in the navigation to expand beyond

## Troubleshooting

## Flex nav collapsing
### Flex nav collapsing

If your menu is part of an auto-sized flex-child, it will probably need a positive `flex-grow` value to prevent it reverting to its smallest form. For instance:

```html
<header class="site-header">
<h1 class="site-header__title">My great site title</h1>
<nav class="site-header__nav">
<ul class="site-nav js-site-nav">
<li><a href="#">Services</a></li>
<li><a href="#">Thinking</a></li>
<li><a href="#">Events</a></li>
</ul>
<ul class="site-nav js-site-nav">
<li><a href="#">Services</a></li>
<li><a href="#">Thinking</a></li>
<li><a href="#">Events</a></li>
</ul>
</nav>
</header>
```

```css
.site-header {
display: flex;
align-items: center;
display: flex;
align-items: center;
}

/**
* Prevents nav from collapsing.
*/
.site-header__nav {
flex-grow: 1;
flex-grow: 1;
}
```

0 comments on commit 06ca1f6

Please sign in to comment.