Send readmore link to services page id section

HTML & CSS
1

in home page i have services listed with readmore button, when user click on readmroe button i wan to send to respective services page section with have specific id.

but due to sticky navbar with height of 50px on scroll in overlapping the content in services page

home page:

<header>
    <nav id="navbar" class="sticky">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <div class="top-top">
    <ul class="temp-op">
      <li><a href="services.html#ser-1" >Service-1</a></li>
        <li><a href="services.html#ser-2" >Service-2</a></li>
        <li><a href="services.html#ser-3" >Service-3</a></li>
        <li><a href="services.html#ser-4" >Service-4</a></li>
        <li><a href="services.html#ser-5" >Service-5</a></li>
    </ul>
  </div>

s1
s11140×149 2.56 KB

so when user click on services-1, services-2 and so on it should redirect to services page id section

services page:

<header>
    <nav id="navbar" class="sticky">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="services.php">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <section id="ser-1" class="service">
    <h2>Service-1</h2>
    <p>Description of Service-1 goes here.</p>
  </section>
  
  <section id="ser-2" class="service">
    <h2>Service-2</h2>
    <p>Description of Service-2 goes here.</p>
  </section>
  
  <section id="ser-3" class="service">
    <h2>Service-3</h2>
    <p>Description of Service-3 goes here.</p>
  </section>
  
  <section id="ser-4" class="service">
    <h2>Service-4</h2>
    <p>Description of Service-4 goes here.</p>
  </section>
  
  <section id="ser-5" class="service">
    <h2>Service-5</h2>
    <p>Description of Service-5 goes here.</p>
  </section>

s2
s2735×442 5.58 KB

as we can see that when we click readmore button of home page thats redirect to services pages id section due to sticky header content of services page is hiding, how can we fixing this redirection issues overlapping content

2 
section {
  padding-top:  50px
}

?

3

it will add padding to over services design, issue of menu overlapping is only when we click readmore button from home page and send it to services page service section specific id

4

Surely that’s not true if the Menu is still there.

5

You can use the scroll-margin property to offset the destination.

Here’s an old codepen to show it in action.

.destination {
  scroll-margin: 100px 0 0 0;
  /* the magic*/
  /* also magic number alert !! */
}
6

works great on same page but when i send to next page it work for first two section only, lets say if i click on link-1,link-2,link-3 it works fine but if click on link -4 then in services its stuck on services-section-3, it’s suppose to show section-4 but showing section-3 instead

7

It works in my example so I’d need to see your page to debug properly.

I assume you have the CSS in the page that has been linked to? And that the page is tall enough for the section to scroll up?

8

it works fine in same page but if we have to send link to next page its not working

9

Will this work? https://nextservice#ser-1.html

10

You have to have the correct css on the page that you are going to which I assume is under your control. You can’t link to someone else’s site and expect your css to affect them. (Although I don’t think you were doing that).

I’d need to see the page in question to see what’s wrong but also remember that you would need to change the scroll margin to match the height you want to avoid so may not be perfect for large swathes of text that wrap.