Please help! CSS Grid and fixed prop

1

My navbar is overlapping everything when I set it to position fixed, can anyone help me please?? :sob: :sob:

2

Are you trying to have the navbar always showing? Or do you want it to expand on a click of a button?

3

Hi yes, I want it to a fixed nav on the side. But i dont know how to stop it from overlapping over the header and the main content.

4

I would recommend using a grid container in similar to the following structure:

.windowContainer{
height: 100%
width: 100%;
display: grid;
grid-template-columns: 20% 80%;
}

.navConatianer{
grid-column-start: 1;
grid-column-end: 2;
}

.pageContainer{
grid-column-start: 2;
grid-column-end: 3;
}

5

You could just add:
margin-left: 150px;

to your .main-section class in your css. But then you would have to move your top header over a little

6

The grid columns isnt having any affect though. :frowning:

7

I did that, but now my main section is flowing outside of its parent element. :frowning:

8

My best advice is, before anything else, go through all the user stories in the test first, one by one, make sure you are passing all the tests, and then once it passes the test, fine tune all your styling elements while making sure your tests still all pass. This can save headaches, because once you start changing things to make the tests pass, you might have a whole new different set of styling problems instead of this one.