tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/62865-verwendung-button-in-der-kopfzeile-neben-logo-anordnen-und-auf-footer-verlinkenRockSolid Themes: Discussion 2020-12-10T08:50:32Ztag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-07T09:14:44Z2020-12-07T09:14:44ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><p>Vielen Dank für Ihre Frage.</p>
<blockquote>
<p>Wie bekomme ich einen Button so hin dass er rechts neben dem Logo ist</p>
</blockquote>
<p>Für den Button können Sie ein HTML-Modul in den Theme-Einstellungen erstellen mit folgendem Inhalt:</p>
<pre>
<code><a href="{{env::request}}#ID-DES-ELEMENTS" class="button header-navigation-button">
Button-Text
</a></code>
</pre>
<p>dieses in den Layouteinstellungen nach dem Logo platzieren und mit folgendem CSS-Code in der Datei <em>files/tao/css/custom.css</em> positionieren:</p>
<pre>
<code>.header-navigation-button {
position: absolute;
top: 50%;
left: 15em;
transform: translateY(-50%);
}</code>
</pre>
<blockquote>
<p>Was muss im Link stehen damit zum Footer gescrollt wird?</p>
</blockquote>
<p>Dem Element auf dass Sie verlinken möchten muss eine CSS-ID vergeben werden und der Link muss auf die entsprechende ID zeigen: <code>{{env::request}}#ID-DES-ELEMENTS</code></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-07T17:20:10Z2020-12-07T17:20:11ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><p>Vielen herzlichen Dank, das kam schnell und sehr zielführend :-)</p></div>Stephantag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-08T11:43:24Z2020-12-08T11:43:25ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><p>Kurzes Follow Up:<br>
Wo steht eigentlich dass die Kopfzeile bei Anwendung mit dem Handy verschwinden soll?<br>
Das würde ich auch gerne ändern.</p></div>Stephantag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-09T00:13:29Z2020-12-09T00:13:30ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><p>Es ist mir noch nicht ganz klar, deswegen rolle ich die Frage nochmal von hinten auf, vielleicht können Sie mir ja noch einen Tipp geben:</p>
<p>Im Grunde geht es um einen CTA Button im Header, der möglichst in keiner Bildschirmbreite das Logo verdeckt und mit jedem Gerät sichtbar bleibt. Er soll auf das Kontaktformular im Footer leiten.</p>
<p>Außerdem würde ich dafür gerne den Button Nr. 3 aus Tao verwenden, momentan kommt immer Nr. 1- aber das ist dann schon ein Luxusproblem...</p></div>Stephantag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-09T08:14:19Z2020-12-09T08:14:19ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><blockquote>
<p>Wo steht eigentlich dass die Kopfzeile bei Anwendung mit dem Handy verschwinden soll?</p>
</blockquote>
<p>Informationen zu diesem Thema finden Sie in folgendem Beitrag: <a href="https://help.rocksolidthemes.com/discussions/contao/7375">https://help.rocksolidthemes.com/discussions/contao/7375</a></p>
<blockquote>
<p>Im Grunde geht es um einen CTA Button im Header, der möglichst in keiner Bildschirmbreite das Logo verdeckt und mit jedem Gerät sichtbar bleibt.</p>
</blockquote>
<p>Um das Logo zu verdecken können Sie in den gewünschten Media-Queries die Position des <code>.header-navigation-button</code> mit den Eigenschaften <code>top</code> und <code>left</code> dementsprechend Anpassen.</p>
<blockquote>
<p>Außerdem würde ich dafür gerne den Button Nr. 3 aus Tao verwenden, momentan kommt immer Nr. 1-</p>
</blockquote>
<p>Die dritte Variante des Buttons kann mit der CSS-Klasse <code>-tertiary</code> aktiviert werden, z. B.:<br>
<code><a href="…" class="button -tertiary header-navigation-button"></code></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-09T12:49:46Z2020-12-09T12:49:47ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><p>Dankeschön. Fast alles gut, nur dass das Logo nichts neben sich duldet, der Button ist immer unter dem Header, oder, wenn im Layout über dem Logo gesetzt, das Logo unter dem Header. Hängt das mit display: inline-block; zusammen?</p></div>Stephantag:help.rocksolidthemes.com,2012-07-23:Comment/488822352020-12-10T08:50:29Z2020-12-10T08:50:29ZVerwendung: Button in der Kopfzeile neben Logo anordnen und auf Footer verlinken<div><p>Wir konnten das Problem nicht reproduzieren. Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.</p></div>RockSolid Themes