Technical Doc Page help needed

HTML-CSS
1

Hello all

Despite my best attempts to find a solution to my problem, I couldn’t find it.

The page seems to be almost ready to submit with one exception: in responsive mode the menu moves to the top of the page as it’s meant to but so does all the text, which is supposed to go below the menu.

The only way I could find to half solve the problem was to add a 250px margin-top to the sectionBody id. However, if you try to navigate any of the link, the text gets buried under the menu.

Any tips or pointer to what I’m doing wrong?

here’s a link to the codepen

Thank you all in advance!

2

One way to fix it:

  1. Give the main-section padding-top in the media query
@media (max-width: 766px) {
  .main-section {
    padding-top: 245px;
  }
}
  1. Make a utility class, say .anchor-nav-fix, and add it to all the sections except the main-section
.anchor-nav-fix {
   margin-top: -245px;
   padding-top: 245px;
}

Side note: I wouldn’t use -webkit-fill-available without at least also providing the default and other browsers prefix versions. The support also seems questionable, maybe see if you can achieve the desired result some other way.

https://caniuse.com/#feat=intrinsic-width

1 Like
3

You were on the right path when you added the top-margin. This puts a ::before pseudo element above that anchor target so that you leave space your fixed header.

  #main-doc{
    margin-top:255px;
  }
  
  :target::before{
    content:'';
    display:block;
    height:255px;
    margin-top: -255px;
  }
4

Thank you so much guys!

I ended up doing as @alhazen1 said only adding a @media to remove the the margin while on full screen mode as such:

@media (min-width: 767px) {
#main-doc {
margin-top: 0;
}
}

and it worked just as I wanted!

Again, thank a bunch :slight_smile: