AMP: Building Accelerated Mobile Pages

Scrollable horizontal navigation

We can make a very simple improvement simply by applying CSS whitespace: nowrap, and overflow-x: scroll styles to our horizontal navigation bar. This will allow the menu items to extend beyond the edge of the page. The HTML for our links will look like this (/ch4/nav-div.html):

<div class="primary-nav">  <ul>    <li><a href="#">news</a></li>    <li><a href="#">sports</a></li>    <li><a href="#">arts</a></li>    ...  </ul></div>

And the CSS looks like this:

.primary-nav {white-space: nowrap;overflow-x: scroll;}

We also style the navigation links:

.primary-nav a {  font-family: 'PT Sans', sans-serif;  color:#fff;  font-size: 1.5rem;}

So far, so good! However, the list can look truncated if a menu item runs off screen mid-item. ...