Hide Announcement Bar in a single page #7695

ccamusso · 2022-06-28T05:01:22Z

ccamusso
Jun 28, 2022

Is it possible enable Announcement Bar but hide it on a specific page?

Answered by slorber

Yes

Solution 1: swizzle the announcement bar, use React-Router useLocation() hook and render nothing when your condition is met

Solution 2: use CSS classes added to the <HTML> element to hide the announcement bar for specific pages/docs

html.docs-wrapper.docs-doc-id-introduction div[class*="announcementBar"] {
  display: none;
}

slorber · 2022-06-29T10:54:38Z

Yes

Solution 1: swizzle the announcement bar, use React-Router useLocation() hook and render nothing when your condition is met

Solution 2: use CSS classes added to the <HTML> element to hide the announcement bar for specific pages/docs

html.docs-wrapper.docs-doc-id-introduction div[class*="announcementBar"] {
  display: none;
}

1 reply

Second solution work fine, thanks.