CODEWITHSUNDEEP
javascripthtmlreactjsnext.js
Arnold Gee
Arnold Gee

Reputation: 906

How do i remove the div with id="__next" in Next.js

I am making a website with Next.js. I want to have a header with position: sticky; behavior.

However, Next.js automatically generates a div with the attribute id="__next" at the root of my website without my permission.

enter image description here

I need to remove that div so that the position: sticky; behavior of my header can work the way it is expected to do. How can I do that?

Upvotes: 5

Views: 10513

Answers (2)

Zain Shabir
Zain Shabir

Reputation: 310

You cannot remove it, next.js needs it to render your web app. position: sticky always look for it's parent element's height. You can assign height: 100%; position: relative; to the __Next id. So, it will work as body. And then, your position sticky will work.

Upvotes: 5

user16435030
user16435030

Reputation: 

body {
  display: flex;
  min-height: 100vh;
}

#__next {
  flex: 1 1 auto;
}

// do whatever you want here and it'll work as expected

Upvotes: 4

Related Questions