tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/15835-verwendung-header-navigation-berdeckt-ankersprungzielRockSolid Themes: Discussion 2021-06-16T14:22:34Ztag:help.rocksolidthemes.com,2012-07-23:Comment/398216522016-05-09T08:10:45Z2016-05-09T08:10:45ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>Vielen Dank für Ihre Frage.</p>
<p>Die verlinkte Problemlösung sollte mit den meisten
Elementen funktionieren, eine HTML5-Section ist dafür nicht
nötig.</p>
<p>Sie können den beschriebenen CSS-Code über die ID des
Text-Elements zuweisen, z. B.:</p>
<pre>
<code>#id-des-text-elements {
margin-top: -100px;
padding-top: 100px;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/398216522016-05-09T20:06:06Z2016-05-09T20:06:07ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>mit Textelement getestet; funktioniert - besten Dank.</p></div>Reinhardtag:help.rocksolidthemes.com,2012-07-23:Comment/398216522020-03-06T23:26:36Z2021-06-16T13:25:18ZVerwendung: Header Navigation überdeckt Ankersprungziel<div><p>Danke für den Lösungsansatz! Ich habe das konkret so umgesetzt:</p>
<p>1) Mit "Überschreiben" alle Elemente, zu denen gesprungen wird, mit der Klasse "anchor" gekennzeichnet.<br>
In der custom.css mit einem mediaquery (tritt ja nur in der Desktop-Version auf):</p>
<pre>
<code>@media screen and (min-width: 899px) {
.anchor {
margin-top: -45px;
padding-top: 45px;
}
}</code>
</pre>
<p>2) Individuelle Ankernamen in das ID-Feld eingetragen als Sprungmarken.</p>
<p>3) Als erstes Element eine Navigationsbox erstellt, in dem alle Links als Liste stehen:</p>
<p>CSS. Linkbeispiel:<br>
<code><a href="{{env::request}}#anchorname">Element Title</a></code></p>
<pre>
<code>.anchornavi {
clear: none;
float: right;
max-width: 20em;
padding: 1em;
margin: 1em;
border: solid 1px #ddd;
list-style-type: square;
}</code>
</pre>
<p>Liebe Grüße, Michael</p></div>michael