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">


To add the close icon:

Change the size of close icone.

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

<div class="flex justify-start items-center ampstart-sidebar-header">
<div role="button" aria-label="Close Sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">✕</div>




















Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive