AMP: Building Accelerated Mobile Pages

Styling the sidebar with CSS

We noted earlier that there can only be one amp-sidebar per page, so we could target it simply with amp-sidebar as selector. We also gave our sidebar an id of sidenav, so we can also use this to target it.

We'll match the background color to the header color of our example page, set its width, and give it a nice drop shadow effect:

#sidenav {  background-color: #005689;  padding: 0.5rem;  width: 200px;  box-shadow: 0.2rem 0 1rem rgba(0,0,0,0.5); }

Next, we can style the sidebar items. We used <li> elements for each item, so they're easy to target:

#sidenav li {  font-family: 'PT Sans', sans-serif;         font-size: 1.5rem;  line-height: 2.625rem;  list-style: none;  border-bottom: 1px solid #10679b;}

And finally, we'll set ...