1 page design: links and anchors with sticky header

Seppe
191 Posts
Seppe posted this 3 weeks ago

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
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Seppe
191 Posts
Seppe posted this 3 weeks ago

edit: problem 2 is solved

edit: problem 2 is solved
Seppe
191 Posts
Seppe posted this 3 weeks ago

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
191 Posts
Seppe posted this 2 weeks ago

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 2 weeks ago

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