Hi all,
I have posted this new page on my website and noticed that on a small screen such as laptops a gap appears on top of the naviagtion menu but on a bigger screen a gap doesn’t appear https://www.sytorus.com/the-data-protection-academy?hs_preview=iiykXGIx-35748525985
Also the anchor link problem is another one that i have come across, the heading gets cut off when i click into each section from the links at the top.
Does anyone how i can fix these two problems so no gap appears and the anchor links appear as they should without any cut off?
Hey @ColmK1997
Thank you for the information provided, I’ll tag a few experts that can share their thoughts with you
Hey @Kevin-C , @stefen @piersg any advice you can share with @ColmK1997 ?
Thanks
Kevin-C
November 18, 2020, 1:34pm
3
Hey @ColmK1997 and thanks @sharonlicari
Looks like you’ve got a negative margin on the links which maybe causing this issue:
Im not sure the purpose of this negative margin, but making it a positive removes the issue:
.hs-menu-item.hs-menu-depth-1.hs-item-has-children > a {
margin-bottom: 6px;
}
As for the links you’ve got a top: -150px set on them:
I would try increasing that negative number to -250px
a[data-hs-anchor="true"] {
top: -250px;
}
Hi Kevin, that worked thank you.
