Help on SASS regarding responsive nav bar
Hello all, I just started learning from zero knowledge two weeks ago and currently tackling sass.
I have a mockup and I am working towards but can't seem to get the nav items to space evenly within their "column" like the mock up as well as the longer border-bottom when the link is active (only to the width of the text)
I've fiddled with flex box, alignment and justify content, nothing seems to make it budge.Been stuck on this for the past 6 hours and seriously questioning if I am just really stupid...
I've included my html and scss as well as the mock ups and what mine currently looks like in dev tool.
Any pointers or help would be much appreciated.
7 Replies
If you are using
@include you must have a sass mixin. but i cannot see the sass mixin in your code.
Also, it would make it a lot easier to debug your issues if you could share your code on codepen
also, you have padding:0px10px; this wont work, you need to separate the values with a space. Not related to the problem, just letting you knowHello, so sorry, I'm very new at this, I'll look into codepen, my @include is just the table min-width for 768px width. Would that affect the main scss? And thank you for the tip on padding!
Are you using a mixin for your media query?
Yes, I will screenshot the rest to post in the mean time while I get codepen
Aah okay. Yeah this looks correct. But yeah you wont really be able to use codepen with multiple files. And you see to be using multiple different sass files. So i guess you will have to use codesandbox.io instead of codepen. But i am not sure if they have support for sass... But i think so.
Otherwise, just upload the website to a host so i can just debug it in devtools or something.
Btw, have you checked the compiled code?
I have but couldn't tell what is causing the issue, it might be really simple but I am just too blind to see it..would pushing it to github work as well?