CSS for AMP Pages: Sidebar

The side bar contains navigational links or menu. It also contains close icon to close the sidebar.

First, set the background color, text color, and width of the sidebar.

.ampstart-sidebar {
background-color: #fff;
color: #000;
width: 300px
}

Add the right and left padding.

.px3 {
padding-left: 1.5rem;
padding-right: 1.5rem
}

Final code will be:

<amp-sidebar id="header-sidebar" class="ampstart-sidebar px3" layout="nodisplay">

</amp-sidebar>

To add the close icon:

Change the size of close icone.

.ampstart-navbar-trigger {
font-size: 2rem
}