Fixed position section covers access to content below

Design help General
1

Hi,
I have a blinking arrow that I want displayed fixed over the rest of the content (as you can see in the read only below.) The problem is that the section that the arrow is contained in covers a big portion of the text when you scroll down. Meaning that one cannot click on links etc.

Is there a way to have the fixed arrow centrally positioned without this issue?

Read only:
https://preview.webflow.com/preview/opi-54b829?utm_medium=preview_link&utm_source=designer&utm_content=opi-54b829&preview=211a488acbad17918cb8215d5135af22&mode=preview

2

Tjena,

you can set the “navigation-section” to a z-index of 1, and then set the rest of the sections to “position: relative” with a z-index of for example 2. The navigation-section will then go “behind” the other sections, and links will be clickable :slight_smile:

3

Thank you for your reply.

Clarification:
The design idea is for the arrow to go infront of other sections. Seems like there should be a way to limit the navigation section to the actual area of the arrow but I cannot figure it out…

4

Try the following css code for your fixed element:

<style>.your-fixed-element-class {pointer-events: none;}</style>

Just add an html-embed with the code somewhere on the same page.

Hope it helps!

1 Like
5

That worked really well!

Thanks a lot ChrisT!