0

I've been using Docusaurus v2 with the default theme for my Python library website and love it! I'd like to change the position of the announcement bar, which is currently at the top of the page, as it isn't very visible. I think it would work better beneath the "hero". Is there any way to accomplish this without swizzling the Layout element? Thanks!

1 Answer 1

0

You can always create your own annoucement bar component and add it to your index.js file. This is what I did to create any additional bar under the hero.

CODE EXAMPLE:

function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className='container'>
        <h1 className='hero__title'>{siteConfig.title}</h1>
        <p className='hero__subtitle'>{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className='button button--secondary button--lg'
            to='/docs/intro'
          >
            Docusaurus Tutorial - 5min ⏱️
          </Link>
        </div>
        {/* YOU CAN ADD YOUR ANNOUNCEMENT BAR HERE */}
        <div>
          <YourComponent />
        </div>
      </div>
    </header>
  );
}

Create and Add your Annoucement Bar Component

This is how I added it to my website under that homepage hero...

Example Home Page Annoucement Bar Docusaurus Website

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.