How to display a fixed navbar in Nextjs?

Question

I have a Nextjs app that displays the same navbar on each page. The navbar has a fixed position. The display is correct on the homepage (written in index.tsx). But when I click on a new page, the new page is hidden behind the navbar!

The issue disappears if I remove the fixed position property. But I can't believe Nextjs doesn't support such a basic task.

The code is very simple:

// _app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
        <Navbar />
        <Component {...pageProps} />
    </>
  );
}

export default MyApp;


// about.tsx

const About: NextPage = () => {
  return (
    <section>
      <h1>About</h1>
    </section>
  );
};

export default About 

// navbar.tsx
export default function Navbar() {
  const router = useRouter();
  return (
<nav className={styles.navbar}>
  <Link href="/">
    <Image
      src={icon.src}
      className={styles.logo}
      alt="logo"
      width={70}
      height={70}
    />
  </Link>
  <ul className={styles.list}>
    <li
      className={
        router.route === "/about" ? styles.listItemActive : styles.listItem
      }
    >
      <Link href="/about">About</Link>
    </li>
  </ul>
</nav>
  );
}

//navbar.module.css
.navbar {
  background-color: var(--dark);
  color: #fff;
  height: 80px;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  position: fixed;
  z-index: 999;
}

.logo {
  cursor: pointer;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.listItem {
  cursor: pointer;
}

.listItemActive {
  cursor: pointer;
  color: var(--red);
}

How to fix this?

Dmitriy · Accepted Answer · 2022-05-21 17:21:20Z

1

Just add a position to your css.

top: 0px;
right: 0px; 
left: 0px;

https://developer.mozilla.org/docs/Web/CSS/position

answered May 21, 2022 at 17:21

Dmitriy

262 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HelloWorldEngineer Over a year ago

I accept the answer, BUT the page is still hidden behind the navbar. I still need to apply a margin-top to the page container.

Shamim Reza · Accepted Answer · 2022-05-21 08:21:31Z

1

If what you want is to have a sticky navbar, you can do it with pure CSS with position: sticky like this:

header, nav, main {
  padding: 1.7rem 1rem;
}

header {
  background-color: #d99;
}

nav {
  position: sticky;
  top: 2rem;
  background-color: #9d9;
}

main {
  height: 100vh;
  background-color: #99d;
}

--

<header>
    Header
</header>

<nav>
    Navbar
</nav>

<main>
    Main
</main>

answered May 21, 2022 at 8:21

Shamim Reza

912 silver badges10 bronze badges

1 Comment

HelloWorldEngineer Over a year ago

Thanks. But I don't want a sticky navbar. I want a fixed navbar, so the navbar is always visible at the top of the page. The page content should disappear behind the navbar when the user scrolls.

luniacllama · Accepted Answer · 2022-11-05 09:58:59Z

0

position: sticky;
top: 0px;
right: 0px; 
left: 0px;

this worked for me!

answered Nov 5, 2022 at 9:58

luniacllama

11 bronze badge

Collectives™ on Stack Overflow

How to display a fixed navbar in Nextjs?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related