Plz amswer my problems on technical documentation page

i have comleted my techinical documentation page project :


although i have completed my tests but having problems on smaller viewport if i fix nav bar it comes over header so what should and how should i make it better on smaller viewports.

I don’t see it switching to a stacked layout on small screens? Can you try implementing it on the Codepen so we can see what you have tried?

But you will likely just have to push down .content using top margin/padding. Remember that position fixed will take the element out of document flow so it does not affect other elements (i.e. it will not push other elements below it).

in stacked layout the content of nav bar goes out of screen how should i fix that cuz that look terrible page so i removed that media query

and my other question is that how should i make nav bar in my media query fixed from grid area 2/1/3/2
like it should be stationary as said in test

You need to use position: fixed (or sticky might work as well).

Can you make a fork of the project (click the Fork button at the bottom) where you do have the code you have tried for the fixed nav. If we can’t see your code it is kind of hard to help you.


here it is when i fix it paddings and margins go out of control in fixed position it is more terrible

made changes and almiost made something readable on small viewport and also learnt something new but still having problem in header section

I blame the CSS Grid API. You are over complicating this in my opinion (it’s really not your fault). I see CSS like this all the time from beginners just starting to learn CSS (and Grid).

A lot of beginners do this with CSS grid where they almost turn the page into a jigsaw puzzle where you have to manually place everything and move things around (row, columns, and grid cells). Also, the CSS becomes really hard to read and reason about with all the grid-area line placement.

Anyway. For the small screen layout, if you just remove CSS grid in the 460px media query you are 85% done. The page will stack as it should and now all you need to do is figure out how to deal with the header and nav.

Here is a quick example:

@media (max-width: 460px) {
  .grid {
    display: block;
  }

  .nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 250px;
    overflow: auto;
  }

  .header {
    margin-top: 260px;
  }
}

You might want to set the background-color on the body. You will also need to research how to make the links land correctly when you have a fixed nav.

Thanks for Helping and its now understandable except nav bar can u plz check and tell me How to fix that like left side items in nav bar arent showing

It’s the justify-content: center on the nav doing that.

I would personally prefer it if the nav was stacked vertically as that is a more natural way of using navigation links. It also lets the user scroll the list using the mouse wheel instead of having to click the scroll bar. There are ways to create horizontal scroll but it’s often a bit hacky.

thanks a lot for teaching me things i didnt knew and helping me understand things

1 Like