Navigation Scroll To Section ID - Content Hidden Behind Fixed Navigation - Question | JoomShaper

Navigation Scroll To Section ID - Content Hidden Behind Fixed Navigation

S

selma123

SP Page Builder 2 years ago

Hi,

I have a one pager website and the navigation is setup with # links to section IDs. The problem is that the top or halft of the text is hidden by the fixed navigation.

How can I add a padding/margin to scroll to section ID's? I don't want to add paddings to the content, since the gaps would be way too large.

thank you for your quick support.

best regard,

0
10 Answers
Pavel
Pavel
Accepted Answer
2 years ago #16091

Hi. You can use the HTML RAW addon containing an anchor by place it in the section above and configuring margins/paddings of the addon or the addon position.

0
S
selma123
Accepted Answer
2 years ago #16110

Hi Pavel,

Thanks a lot for your help, this worked fine :-)

best regards,

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #16114

Hello selma123

I am glad that you have found the solution. Thanks, Pavel.

Best regards

0
LR
Laurent Robin
Accepted Answer
2 years ago #16140

i have the same issue with the cubiq template. when the header class is "menu-fixed-out" the browser scroll too far down. when the header class is "menu-fixed" positioning is fine. Once you scroll a bit down and click on the menu links the positioning is correct. Or when you scroll down to the bottom and use the menu to scroll up it is also correct. So the problem only happens once when the menu is fixed-out opening the page. the HTML RAW solution from Pavel can not fix that. it's a JS issue. unfortunatly i can't JS.

0
Pavel
Pavel
Accepted Answer
2 years ago #16146

Wellcome, guys.

Hi Robin. It's not JS issue. If you can provide a public link and screenshot, I can take a look.

0
LR
Laurent Robin
Accepted Answer
2 years ago #16147

Thanks Pavel! https://robilau.com

0
LR
Laurent Robin
Accepted Answer
2 years ago #16340

Any news on this please?

0
Pavel
Pavel
Accepted Answer
2 years ago #16344

Hi. The problem arises due to the fact that the height of the header is reduced during the scrolling. Use the following code to exclude header from this process.

#sp-header {
    position: absolute;
    width: 100%;
}

And configure the padding top 100px in your Home section.

Also in Home Section there is an addon with hidden content. However, the wrapper of this addon is not hidden and has margin bottom 30px. Replace this value to 0. This will allow you to enlarge padding top on 30px in the Services section, without harm to the layout.

0
LR
Laurent Robin
Accepted Answer
2 years ago #16348

PAVEL YOU DA MAN!! Thank you!! it works like a charm.

0
Pavel
Pavel
Accepted Answer
2 years ago #16404

You are wellcome

0