1 page design: links and anchors with sticky header

Seppe
221 Posts
Seppe posted this 08 November 2021

The header of my template is sticky for desktop view, on mobile it's not.

In the different sections on my page, I made joomla positions to add text.
I also added the link-anchors.

In the menu, I added the URL with the #anchor.

1st problem:
In desktop view, the section where I put the anchor, is overlapped by the header.
How to get it fixed, that the section I want, comes UNDER the header?

2nd problem:
I tried with <a> and <div>, on mobile devices this kind of links doesn't seem to work.
even adding an extra section, with HTML control doesn't work.

greetings

The header of my template is sticky for desktop view, on mobile it's not. In the different sections on my page, I made joomla positions to add text. I also added the link-anchors. In the menu, I added the URL with the #anchor. 1st problem: In desktop view, the section where I put the anchor, is overlapped by the header. How to get it fixed, that the section I want, comes UNDER the header? 2nd problem: I tried with &lt;a&gt; and &lt;div&gt;, on mobile devices this kind of links doesn&#39;t seem to work. even adding an extra section, with HTML control doesn&#39;t work. greetings
Joomla one-page-design anchor-links sticky-header
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Seppe
221 Posts
Seppe posted this 08 November 2021

edit: problem 2 is solved

edit: problem 2 is solved
Seppe
221 Posts
Seppe posted this 08 November 2021

for problem 1:
I found this piece of code in another topic:

style="display: block; position: relative; top: -30px; visibility: hidden;"

This works on desktop... but when try it on a mobile phone the layout is a bit messed up.
I have always have the bottom-part of the previous section on my screen

for problem 1: I found this piece of code in another topic: > style="display: block; position: relative; top: -30px; visibility: hidden;" This works on desktop... but when try it on a mobile phone the layout is a bit messed up. I have always have the bottom-part of the previous section on my screen
Seppe
221 Posts
Seppe posted this 19 November 2021

I removed the previous code, and solved it with a class

a.anchor {

display: block;
position: relative;
top: -250px;
visibility: hidden;

}

But now, whenever I use a menu-link, I can use only 1. afterwards, the menu is not working anymore.
How is that possible?

I removed the previous code, and solved it with a class > a.anchor { display: block; position: relative; top: -250px; visibility: hidden; } But now, whenever I use a menu-link, I can use only 1. afterwards, the menu is not working anymore. How is that possible?
Support Team
Support Team posted this 20 November 2021

Hello Seppe,

Could you please provide the link to that page?

Gina
Themler Support

Hello Seppe, Could you please provide the link to that page? Gina Themler Support
You must log in or register to leave comments