Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Anchor with Sticky Header

Featured Lock Resolved Issue
Hi
On a site i use a helix3 based Template with a sticky header
when i lets say have the header with 70px and i set an anchor on a site
the link jumps and is directly behind the header
so is it possible to set this on all templates when sticky header is activated to jump at the rigth place

or can i add any custom css to just this one site where i have this anchor links
here is a site so you can see what i mean https://www.iliqchuan.at/kung-fu-lernen

Thanks for your help

6 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Sorry i didn't find any issue in your shared link. Would you please mark the exact location of your issue?

yo_ray

More than a month ago #Permalink
Thanks
i have found a solution a few moments before (i think (at the moment this works)

with this custom code
so if anyone also has this problem this works ...i hope that it doesnt conflicts with other things in the future :) )


:target:before {
content:"";
display:block;
height:70px; /* fixed header height*/
margin:-70px 0 0; /* negative fixed header height */
}


without this code the sticky header was overlapsing the area
my sticky header is 70px ...you have to change it to your needed header size

Sifat - Staff

More than a month ago #Permalink
Great :)

attilio

More than a month ago #Permalink
well done !!

fernandobiancolini

More than a month ago #Permalink
Hi, I'm using the Decora template and I have the same problem.

The CSS code does not work for me.
Could you update the template to solve this problem?

Regards!
Fernando

Sifat - Staff

More than a month ago #Permalink
Hi, I'm using the Decora template and I have the same problem.

The CSS code does not work for me.
Could you update the template to solve this problem?

Regards!
Fernando

Thanks for your query. I think you are talking about the scroll jump issue. If so then please use this css into your custom css and that'll solve the issue.

.header-sticky ~ section#sp-main-body {
padding-top: 60px;
}



-Best Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 119
Sifat

Sifat

Total Accepted Answers: 63
Toufiq

Toufiq

Total Accepted Answers: 60
Mehtaz Afsana

Mehtaz Afsana

Total Accepted Answers: 13
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 11

118

Templates

302705

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us