Nav links stuck to top of page.
I've tried every way I know how to change this. Flex direction, justify content, align items etc. I can't seem to find the cause anywhere. Thanks in advance.
My GitHub repo (for a fully styled nav): https://github.com/alanrobert/2Nfibre-site-built-from-scratch
or a quick Codepen I made to isolate the issue: https://codepen.io/alanrobert/pen/WNYwWzj
GitHub
GitHub - alanrobert/2Nfibre-site-built-from-scratch
Contribute to alanrobert/2Nfibre-site-built-from-scratch development by creating an account on GitHub.
6 Replies
They are at the top because they have no top margin and very little top padding.
The only padding they have is .5rem on the ul.
You could either increase this or, probably simpler, within your media query add padding-top (or margin-top, I don't think it really matters in this instance) to your .nav element
.desktop-nav
add align-items: center;
simple
Thanks Chris, I think this may be the best solution. The thing that confuses me, is that before I started styling the mobile nav, the desktop nav was aligned perfectly using flex. However, since I've added things like position and transition etc. The links have lost their center. Which leads me to believe I've restricted the flex property somewhere
i just used your pen and added align-items:center;
omg, perfect. Can't believe I missed that. Thanks Azyrum!
no prob, happy coding 🙂