Next.js Discord

Discord Forum

Problem with header not showing

Unanswered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
I'm trying to create a portofolio website and whatever I do, this header wont show up
I attached one screenshot, and as you can see the header sits in the corner of the screen for some reason. 
import React from 'react';

export default function Header() {
  return (
    <header className="z-[999] relative">
      <div 
              className="fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
              >
      </div>
    </header>
  );
}
Heres the code of the header. If anyone can help out or point at what im doing wrong would be very helpful
Thank you

9 Replies

Samyar
Hey, there are several reasons why it does not show up
One is that the width is zero
Try using w-screen instead of w-full
This will set the width to the width of the screen
Also you should insert some content
The width full will be 100% of the parent and the parent has zero width
That's why it's zero
This is one reason
Another way would be to set left-0 and right-0 so that it will have a width