tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/65811-verwendung-erweiterung-und-ausrichtung-navigation-headder-oneoRockSolid Themes: Discussion 2021-04-20T11:50:28Ztag:help.rocksolidthemes.com,2012-07-23:Comment/491523322021-04-20T11:10:02Z2021-04-20T11:10:02ZVerwendung: Erweiterung und Ausrichtung Navigation Headder Oneo<div><p>Produkt: Oneo Contao<br>
Contao-Version: 4.9 LTS</p>
<p>Hallo Rocksolid-Supportteam,</p>
<p>Ich möchte mit Oneo im Headderbereich eine 2-zeilige Navi erreichen, wie sie z. B. auf euren Rocksolid Seiten zu sehen ist, die obere Zeile soll auch sichtbar bleiben, also beide Zeilen scroll-to-fixed.</p>
<p>Obere Zeile:<br>
komplette Breite mit Hintergrundfarbe, Inhalte: Listenelemente mit Links "Anschrift | Telefonnummer | Email" - rechte Seite: "Impressum | Datenschutz"<br>
Beschnitt / Randabstände Inhalte: Bündig mit Contentbereichen (ca. 1200px Fullpage Layout)</p>
<p>Untere Zeile:<br>
Oneo Standard Navi mit Logo, etc. - allerdings Randabstand der Inhalte wie obere Zeile bzw. Contentbereiche darunter.<br>
Die Dropdownmenüs sollten dabei nicht auf die ca. 1200px Contentbreite beschnitten sein, sondern wie bisher etwas ausladender sein (z.B. 1600px.)</p>
<p>Für Eure Hilfe im Voraus dankend verbleibe ich mit besten Grüßen<br>
Marcel</p></div>Marceltag:help.rocksolidthemes.com,2012-07-23:Comment/491523322021-04-20T11:50:26Z2021-04-20T11:50:26ZVerwendung: Erweiterung und Ausrichtung Navigation Headder Oneo<div><p>Vielen Dank für Ihre Nachricht.</p>
<p>Ihre Frage betrifft eine individuelle Anpassung. In unseren <a href="https://rocksolidthemes.com/support-richtlinien">Support-Richtlinien</a> weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:</p>
<p>Für die obere Zeile können Sie ein eigenes HTML-Modul anlegen mit z. B. folgendem Inhalt:</p>
<pre>
<code><div class="header-navigation-bar">
<ul>
<li>Anschrift</li>
<li>Telefonnummer</li>
<li>Email</li>
</ul>
<ul>
<li>Impressum</li>
<li>Datenschutz</li>
</ul>
</div></code>
</pre>
<p>Dieses Modul kann anschließend in den Layouteinstellungen vor dem Modul „~ Main Navigation Begin“ eingebunden werden.</p>
<p>Der CSS-Code für dieses Modul kann z. B. folgendermaßen aussehen, diesen können Sie in die Datei <em>files/oneo/css/custom.css</em> einfügen:</p>
<pre>
<code>.header-navigation-bar {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.header-navigation-bar ul,
.header-navigation-bar li {
display: inline;
margin: 0;
padding: 0;
}</code>
</pre>
<blockquote>
<p>Untere Zeile: Oneo Standard Navi mit Logo, etc. - allerdings Randabstand der Inhalte wie obere Zeile bzw. Contentbereiche darunter.</p>
</blockquote>
<p>Diese Darstellung können Sie z. B. mit folgendem CSS-Code realisieren:</p>
<pre>
<code>.main-navigation-search {
margin-right: max(0px, calc(50vw - 640px));
}
.logo {
margin-left: max(0px, calc(50vw - 640px));
}</code>
</pre></div>RockSolid Themes