CSS for AMP Pages: Header

The header contains the logo image or text with website name. It also contains the sidebar toggle icon either on the right side or left side.

First, set the background color, text color and z-index.

.ampstart-headerbar {
 background-color: #fff;
 color: #000;
 z-index: 999;
}

To make the header fixed and set the position.

.fixed {
 position: fixed
}

.top-0 {
 top: 0
}

.right-0 {
 right: 0
}

.bottom-0 {
 bottom: 0
}

.left-0 {
 left: 0
}

Make the header as flexbox and align items (logo and toggle icon) in center.

.flex {
 display: flex
}

.items-center {
 align-items: center
}

Set the padding left and padding right.

.pl2 {
 padding-left: 1rem
}

.pr2 {
 padding-right: 1rem
}

Finally, the header will have classes:

<header class="ampstart-headerbar fixed flex items-center top-0 left-0 right-0 pl2 pr2">

</header>

For the sidebar toggle icon:

Increase the font size of icon and add the right padding.

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

<div role="button" aria-label="Open Sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger pr2">☰
 </div> 

The sidebar will have header-sidebar id.

For the logo image:

Set the top and bottom margin (vertical or y-margin) to zero.

.my0 {
 margin-top: 0;
 margin-bottom: 0
}

Set the left and right margin to auto to make the logo at the center.

.mx-auto {
 margin-right: auto
 margin-left: auto
}

<amp-img src="/../img/logo.png" width="100" height="60" layout="fixed" class="my0 mx-auto" alt="Logo"></amp-img>

Complete header code in HTML is:

<header class="ampstart-headerbar fixed flex items-center top-0 left-0 right-0 pl2 pr4 ">
 <div role="button" aria-label="open sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger pr2 ">☰
 </div>
 <amp-img src="/../img/blog/logo.png" width="100" height="60" layout="fixed" class="my0 mx-auto" alt="The Blog"></amp-img>
</header>