Navbar menu black background color problem

Hi,

I couldn’t figure this one.

I need to change the menu background to black to be at the size of the body which is 1920px
wide.

I want to fill the menu background color to the widest as possible without changing the locations of the logo and the hamburger menu.

The container by default is 1280px wide so a solution to make the menu background color wider is to change the container to 1920px or 100%

The problem is that it puts the logo and hamburger menu on the margins of the page that is too wide and when I use the flex horizontal space-around on the wrapper, it puts the logo and hamburger menu more in the center of the page.

Is it possible to make the background of the menu change color to cover 100% of the page without changing the locations of the logo and hamburger menu?



No need to change the menu background color when it takes the black background from a section below the menu.

Is that the only way?


Ok I discovered that the problem was because I set the div “wrapper” to relative instead of static.

I did it because I have position absolute inside the wrapper ln the menu div and I thought all parent divs that has child divs with absolute has to be relative.

I have seen this in the tutorial about positioning.

You said that “absolute elements are sticked to the first element which is relative”

Can you please explain why in this navbar example, the first element (div wrapper) doesn’t need to be in relative and the absolute element works find on the menu div?

1 Like

Hey, if there isn’t any parent that is relative your absolute element will stick to the body tag.

1 Like