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 weeks 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
1 week ago

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
1 week ago

Hi Pavel,

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

best regards,

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 week ago

Hello selma123

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

Best regards

0
R
Robin
Accepted Answer
1 week ago

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
1 week ago

Wellcome, guys.

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

0
R
Robin
Accepted Answer
1 week ago

Thanks Pavel! https://robilau.com

0
R
Robin
Accepted Answer
1 week ago

Any news on this please?

0
Pavel
Pavel
Accepted Answer
1 week ago

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
R
Robin
Accepted Answer
1 week ago

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

0
Pavel
Pavel
Accepted Answer
1 week ago

You are wellcome

0