Technical documentation navbar help

I want to make my navbar to be scrollable vertically in mobile device but I am still unable to make it work,I also want the desktop version to be scrollable,any workaround with flex or grid ?

Any help will be greatly appreciated :slight_smile:

1 Like

Add overflow-y: auto to .sidebar

1 Like

Also there are reasons in html on usage of tags, you have used header tag in your navbar, you shouldn’t do that, instead use h1 to h6 tags or p tags for content title or text,
Look at this article,
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

1 Like

Thank you so much for the help,it kinda works now,but there is still a few problems left,there is big whitespace bottom of the navbar,also the scrolling in the desktop version is jumping,I want the navbar to be like https://codepen.io/freeCodeCamp/full/NdrKKL

I don’t see any, can you provide the screenshot of your problem

1 Like

Did you update your codepen…?
EDIT: I see the problem, let me go through it

1 Like

Since you have set the height to 50%, the rest of the content gets hidden, give the height of 100vh

1 Like

Thank you :slight_smile: ,fixed it,but now is it not scrolling anymore
I mean I want it to look like this https://codepen.io/freeCodeCamp/full/NdrKKL

Then you have to restructure the code, make it as,

<nav>
    <ul>
        <li><a></a></li>
   </ul>
</nav>

Give the nav as fixed and apply the properties i had mentioned, and give it a try, if you get stuck come back here, we would help you

1 Like

It works,but there is a big whitespace below navbar,also how can I add scrollbar to navbar ?

You can set that still, by giving the navbar a height of 70 or 65% and apply overflow-y scroll on navbar and remove the overflow prop on .sidebar

1 Like

You can remove the space by setting the margin-top of the main to some -200px or -150px

1 Like

Fixed,but now desktop version is broken,half of the main text is disappear to the top

Use media queries, for smaller width

1 Like

Thank you,I will try it tomorrow and report back

Everything seem to work perfectly now and responsive,but when I try it on my phone the scroll is not working at all and the height is not applied,can you please check it on your phone,I have updated my codepen.

HI @James_z let me check it

1 Like

I see this in my mobile, entire menu is displayed, try reducing the height further and test it in mobile

And i see this in my dev tools, you see if the height is small, the scroll gets displayed

1 Like

Thank you so much,I just fix it,I am still curious why when I use percentage it work in the dev tool,is the dev tool not accurate,can you please explain a little about this