Question 267926 in Html Question posted in
Some basic documentation can be found here.

Html – Position link by ID below a sticky menu

In our online store, there is a sticky top menu. I would like to send a link to a section to my clients www.onlinestore.com/#section, but when defining the link by the id, the link leads to the corresponding section but its header is hidden behind the sticky menu. Is there a solution so that the section link goes just below the menu?

enter image description here

Tags:

2

Answers


  1. 0

    You can just adjust padding-top property of your section to solve that. Your link leads to corresponding section but since your menu is big its covering header. With adjusting padding-top you should be able to see your header.

    If you don’t want to modify page layout then you can add this just before your section:

    <div style="display: flex; justify-content: center;">
   <div id="#section" style="
      position: absolute;
      height: 20px;
      width: 20px;
      transform: translateY(-50px);"></div>
</div>

    With this you can just adjust transform property so that your header is not covered by menu, this will not be visible on your page but will solve problem you are facing.

    Login or Signup to reply.
  2. 0

    You can add an invisible pseudo element to the original target element of the link via CSS, like this:

    #your_anchor_id::before { 
  display: block; 
  content: " "; 
  margin-top: -90px; 
  height: 90px; 
  visibility: hidden; 
  pointer-events: none;
}

    This will "extend" the element with that ID so that the anchor will be 90px above the main element (adjust value as needed), without causing any other visible changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search