CODEWITHSUNDEEP
htmlamp-htmlhugo
casey
casey

Reputation: 25

AMP HTML - persistent dismissal of banner in AMP?

I am using gohugo-amp theme in a hugo app. In the header, I have a banner I want to dismiss onclick and have the dismissed state stored.

I have tried <a class="page-banner__close" on="tap:page-banner.hide">X</a> however the banner returns when the page is refreshed.

I have also tried using <amp-user-notification> tag. But <amp-user-notification> fixes the banner in the footer.

Is there a way to put a dismissible banner in the header and have that dismissed state stored so it does not return upon refresh??

Upvotes: 0

Views: 220

Answers (1)

Sebastian Benz
Sebastian Benz

Reputation: 4288

You can style the amp-user-notifcation component to be placed at the top by adding this to your CSS:

amp-user-notification {
  top: 0;
  bottom: inherit;
}

Upvotes: 2

Related Questions