Nav menu disappeared on desktop

I had a fully functioning nav and mobile button menu but styled my mobile nav for so long, that I created an issue somewhere and can't seem to solve it 🥲 Somehow my desktop nav menu is in the mobile menu, only when you widen the screen whilst in the mobile menu after clicking the hamburger button. I've tried cancelling each class in the media query and hiding them all together but can't seem to crack it. This may be a start again for my last commit, but hopefully someone can help 😄 My codepen has the isolated issue in with nothing extra, however you can also view the full build on my github below. Any help would be much appreciated! Codepen: https://codepen.io/alanrobert/pen/oNQxabj Github: https://github.com/alanrobert/2Nfibre-site-built-from-scratch
Al
CodePen
oNQxabj
...
GitHub
GitHub - alanrobert/2Nfibre-site-built-from-scratch
Contribute to alanrobert/2Nfibre-site-built-from-scratch development by creating an account on GitHub.
4 Replies
Chris Bolson
Chris Bolson•2y ago
On your .nav you have
left: 100%;
bottom: 0;
left: 100%;
bottom: 0;
These work for the responsive slide out nav but are breaking your desktop nav. In you media query add this:
.nav{
left: auto;
bottom: auto;
}
.nav{
left: auto;
bottom: auto;
}
and you should see it again.
al_pol
al_polOP•2y ago
Thanks! This got my links in view but left them outside of the nav. I looked over a tutorial I used originally and noticed the media query had
.nav {
position: initial;
}
.nav {
position: initial;
}
Thanks for pointing me in the right direction 😄
Chris Bolson
Chris Bolson•2y ago
I was going to add that but thought that maybe you wanted them to still have the postion fixed.
al_pol
al_polOP•2y ago
I have another issue, now my nav links are stuck to the top. I can't seem to find the issue. I'll post again in a new post but just in case you have an idea, my code pen is: https://codepen.io/alanrobert/pen/WNYwWzj Thanks
Al
CodePen
WNYwWzj
...
Want results from more Discord servers?
Add your server