Hi all. Here is my Technical Documentation Page project…
Some feedback would be nice.
Also I want your suggestions about the navbar, as on small screens I want it to stay on left side of the screen but not visible totally, just on hover, it appears with full width.
I did this, but I feel on small screens the users may not notice there is a navbar at all, as there is just a grey vertical bar which is not indicating that there is a navbar here, how can I make this bar expresses the existance of a navbar so users go and hover over it ?
Thanks in advance.
Update:
The navbar now goes fixed to the top of the page on small screens.
And on hover it returns to its original size.
But still have problem which is on small screens the scroll bar of code element appear on the navbar in hover state… however I’m using higher z-index for navbar… how can I hide them ???
Another problem: on small height screens when hovering over the navbar and then scrolling down to a header then un-hovering the navbar again, it goes to the top but the apparent part of it changes to the header you scrolled down to, not going back to the first header “JS Documentation”… how can I solve this ???
Update:
I have solved the first problem making a Dropdown navigation bar on small screens. thanks to @jel111
the second problem: appears to happen only on Firefox on responsive design mode. But not on chrome or “Firefox out of responsive design mode”. If anyone have an idea why this happens, Please tell us .
Maybe display an arrow pointing to the direction the menu will open.
Edit: I tried doing something but its late and i need sleep. The whole thing is buggy right now and also a lot still to fix, so if you want you can work from: https://codepen.io/fajfara/pen/NEVgyN
yeah It’s great I will try to continue after you.
also I have some Ideas for it I might try them tomorrow too as I need to sleep either.
thanks for help
@fajfara
I’ve done these changes to the navbar …If you wouldn’t mind, give me your feedback on these changes.
And also if you have an idea how to solve these problems.
Maybe at smaller screens just have the heading and when one clicks it opens the secondary heading adn then when clicking those it opens the documentation? thinking like all dropdowns sort of. Just a thought.
@jel111
Nice Idea, I’ve changed the navbar to act similar to a drop-down.
If you don’t mind, check it and tell me your feedback.
This solves the first problem but still the second one exists, Idk why?
As this happens in firefox in responsive design mode only the scroll bar of the code elements appear on the navbar.
But this doesn’t happen with chrome or with firefrox out of responsive design mode. You have any idea why?
Very nice work! It’s clean and good But one thing I don’t like is that we have to click the the nav-link anchors to jump the the sections. If it was me I would make that whole space clickable for better accessibility and convenience.
Yea, I agree with you. But I have to do it like this to pass the tests of FCC projects. Unless I embedded the <li> element inside the <a> element, and I don’t think this a good practice.
There are a couple of techniques in making pure css off canvas menus like using :target pseudo selector or using <input type="checkbox">. Just google for the info and pick the one that you can implement with the minimum code change.
@geekysmurf
Thank you for your feedback
I really thought about this … Then I thought why should I do this while they can go to top from the nav bar links?.
As the nav bar is visible to the user always, even on small screens.
.
.
But one thing I don’t like is that we have to click the the nav-link anchors to jump the the sections. If it was me I would make that whole space clickable for better accessibility and convenience.
