Conversation
app/(pages)/_Navbar/Nav.module.scss
Outdated
| @@ -0,0 +1,65 @@ | |||
| .nav { | |||
| display: flex; | |||
| width: 90rem; | |||
There was a problem hiding this comment.
this should be 100% so it can grow/shrink with every screen size (line 3)
There was a problem hiding this comment.
I see! That makes sense!
app/(pages)/_Navbar/Nav.module.scss
Outdated
| align-items: center; | ||
| gap: 0.625rem; | ||
| background-color: var(--white); | ||
| box-shadow: 0 5px 50px rgba(126, 132, 160, 0.10); |
There was a problem hiding this comment.
what does this do (line 10)
There was a problem hiding this comment.
It adds to the rest of the page so the the rest of the page match the color of the navbar. But I realized the navbar currently looks grey even though I coded it white. I'm not sure why it looks grey. Can you take a look for me? The goal is for it to look white.
| background-color: var(--white); | ||
| box-shadow: 0 5px 50px rgba(126, 132, 160, 0.10); | ||
|
|
||
| position: fixed; |
There was a problem hiding this comment.
is anything below here really necessary (line 12)
There was a problem hiding this comment.
also final note can u make a folder called _components and rename _Navbar to Navbar and move it in there, i forgot to add it on the old version of main
There was a problem hiding this comment.
I did it for centering and pushing the navbar up but you're right nothing changed when I deleted it so I'll remove it. Thank you for noticing it!
There was a problem hiding this comment.
can u remove position: fixed as well
| background-color: var(--white); | ||
| box-shadow: 0 5px 50px rgba(126, 132, 160, 0.10); | ||
|
|
||
| position: fixed; |
There was a problem hiding this comment.
can u remove position: fixed as well
| .nav { | ||
| display: flex; | ||
| width: 100%; | ||
| height: 6rem; |
There was a problem hiding this comment.
can u remove the height and depend on padding instead
| } | ||
|
|
||
| .pages { | ||
| margin-left: auto; |
There was a problem hiding this comment.
instead of margin left auto i think it would be better to have a div with the logo & links and then use justify-content: space-between
There was a problem hiding this comment.
done I added a div name .right
| position: fixed; | ||
| } | ||
|
|
||
| .logo { |
There was a problem hiding this comment.
im not entirely sure this .logo is necessary at all if you're trying to adjust the logo size you can do that directly on the height & width on the component .jsx page and that can just be in px i think it's supposed to be 105x105px on figma
There was a problem hiding this comment.
fixed! I made the logo into 100x100, 105x105 looks too big
| flex-direction: row; | ||
| align-items: center; | ||
| gap: 0.625rem; | ||
| background-color: var(--white); |
There was a problem hiding this comment.
for your background color we don't have a set --white but maybe css does which is why it's like a gray tone? you can just use --off-white it's close enough to #FFFFFF
There was a problem hiding this comment.
off-white worked!! Thank you!
2 participants
Description
Made the Navbar
Checklist:
after creating your PR please mark all of these: