bug/Issue-91: Refactor headers styles to prevent logo from shrinking #113
Conversation
✅ Deploy Preview for super-tapioca-5987ce ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
DevLab2425
added
bug
| @@ -137,8 +136,9 @@ | |||
| } | |||
|
|
|||
| @media screen and (min-width: 768px) { | |||
| .logoLink svg.greenwood-logo-full { | |||
| width: 60%; | |||
| .navBar { | |||
There was a problem hiding this comment.
I might consider sizing it down a "little" bit between the 768px - 1024px range, as it does seem to dominate a bit of the header in that gap.
Maybe we can clamp it or put a max-width or something on it?
| .logoLink svg.greenwood-logo-full { | ||
| width: 60%; | ||
| .navBar { | ||
| display: flex; |
There was a problem hiding this comment.
I think we might want keep it as display: contents at this break point as well, as the vertical alignment of the navigation looks slightly better aligned vertically with the logo and mobile menu icon (IMO 😅 )
display: flex (current)
display: contents
There was a problem hiding this comment.
Hmm, now the nav links stay in the center as we get past tablet breakpoints, as opposed to staying to the right, against the side nav
Apologies for not catching that, I am admittedly not super well-versed with flex box. 😬
DevLab2425
force-pushed
the
issue-91-greenwood-logo-styles
branch
from
e7c3191 to
602bdba
Compare
DevLab2425
force-pushed
the
issue-91-greenwood-logo-styles
branch
from
b4683bd to
7b0bb09
Compare
| justify-content: space-between; | ||
| padding: 0 var(--size-4) var(--size-2); | ||
| margin: 0; | ||
| justify-content: center; |
There was a problem hiding this comment.
The (bottom) padding / margin removal has made things a bit more cramped at the bottom of the header especially on mobile
Made one small tweak to retain some of that and now I think we're good to go!
thescientist13
changed the title
Related Issue
Fix #91
Summary of Changes
Screen.Recording.2024-10-14.at.19.56.17.mov