tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/11684-verwendung-mobile-navigation-fr-tabletsRockSolid Themes: Discussion 2023-06-26T14:15:19Ztag:help.rocksolidthemes.com,2012-07-23:Comment/375226872015-07-30T11:53:51Z2015-07-30T11:53:51ZVerwendung: Mobile Navigation für Tablets<div><p>Produkt: Tao Contao</p>
<p>Hallo Rocksolid-Team,</p>
<p>gibt es eine elegante Methode, um die mobile Navigation für
Tablets zu aktivieren? Ist das vorgesehen?</p>
<p>Gruß und Dank!</p></div>Christiantag:help.rocksolidthemes.com,2012-07-23:Comment/375226872015-07-30T12:07:01Z2015-07-30T12:07:01ZVerwendung: Mobile Navigation für Tablets<div><p>Vielen Dank für Ihre Frage.</p>
<p>Die mobile Navigation wird über Media-Queries im CSS
gesteuert. Fügen Sie bitte folgenden CSS-Code in die Datei
<em>files/tao/css/custom.css</em> ein um die mobile Navigation
bereits in der Tablet-Größe anzuzeigen:</p>
<pre>
<code>@media screen and (max-width: 900px) {
.main-navigation-mobile-open {
display: block;
}
.main-navigation-mobile.is-enabled {
display: block;
}
}</code>
</pre>
<p>Bitte beachten Sie, dass eventuell weitere Anpassungen
nötig sein können um die gewünschte Darstellung zu
erreichen.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/375226872016-02-18T13:27:16Z2016-02-18T13:27:16ZVerwendung: Mobile Navigation für Tablets<div><p>Hallo zusammen,</p>
<p>bei mir wird zwar die mobile Navigation angezeigt. Allerdings
wird die die Hauptnavigation auch noch angezeigt. Wie kann ich
diese noch ausblenden?</p>
<p>Viele Grüße</p></div>jens.betschtag:help.rocksolidthemes.com,2012-07-23:Comment/375226872016-02-18T13:30:45Z2016-02-18T14:20:46ZVerwendung: Mobile Navigation für Tablets<div><p>Hat sich erledigt - hatte gerade einen Hänger!</p>
<p>Gelöst mit</p>
<pre>
<code>.main-navigation {
display:none;
}</code>
</pre></div>jens.betschtag:help.rocksolidthemes.com,2012-07-23:Comment/375226872017-08-10T13:34:19Z2017-08-10T13:34:20ZVerwendung: Mobile Navigation für Tablets<div><p>Danke für diese Lösung. Die soweit wunderbar funktioniert. Allerdings erscheint die Mobile Navi bei mir in der div.header-bar und ist somit kaum zu sehen. In der Standard Variante von Tao verschwindet bei kleineren Auflösungen/mobilen Endgeräten die header-bar ja vollständig. Könnten Sie bitte noch ein Feedback geben, wie die Header Bar im Zusammenspiel mit der oben genannten Modifikation verändert werden muss, um das "normale" Verhalten der header-bar (verschwindet) zu erzwingen? Danke!</p></div>Gerald Helmingertag:help.rocksolidthemes.com,2012-07-23:Comment/375226872017-08-11T08:48:14Z2017-08-11T08:48:14ZVerwendung: Mobile Navigation für Tablets<div><p>Vielen Dank für Ihre Frage.</p>
<p>Dafür können Sie folgenden CSS-Code verwenden:</p>
<pre>
<code>@media screen and (max-width: 599px) {
.header-bar {
display: none;
}
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-21T15:16:59Z2018-07-21T15:17:02ZVerwendung: Mobile Navigation für Tablets<div><p>Hallo,</p>
<p>nichts von dem Zeigt mir eine andere Mobile Navi an.<br>
Gibt es irgendwo eine genau Schritt für Schritt Anleitung ?<br>
Nutze Contao 4.5 und habe auch die Erweiterung dropdown installiert, aber wo finde ich das dann im BE?</p>
<p>Gruß</p></div>Christiantag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-23T06:00:43Z2018-07-30T06:20:14ZVerwendung: Mobile Navigation für Tablets<div><p>Vielen Dank für Ihre Frage.</p>
<blockquote>
<p>nichts von dem Zeigt mir eine andere Mobile Navi an.</p>
</blockquote>
<p>In diesem Beitrag ist beschrieben wie sich die mobile Navigation auch auf Tablets anzeigen lässt. Die mobile Navigation selbst ändert sich dadurch nicht.</p>
<p>Wenn Sie etwas an der mobilen Navigation ändern möchten, beschreiben Sie bitte in einem neuen Ticket Ihren Anwendungsfall: <a href="https://my.rocksolidthemes.com/support">https://my.rocksolidthemes.com/support</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-27T22:58:25Z2018-07-28T09:47:38ZVerwendung: Mobile Navigation für Tablets<div><p>Hallo,</p>
<p>Vielen Dank für ihre Rückmeldung.</p>
<p>In welchem Beitrag steht es??<br>
Wie bekomme ich die Sichtbar ?!</p>
<p>Mfg<br>
Christian</p></div>Christian Btag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-30T06:21:36Z2018-07-30T06:21:36ZVerwendung: Mobile Navigation für Tablets<div><p>In folgender Antwort ist beschrieben wie sich die mobile Navigation auch auf Tablets anzeigen lässt: <a href="http://help.rocksolidthemes.com/discussions/contao/11684#comment_37522788">http://help.rocksolidthemes.com/discussions/contao/11684#comment_37522788</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-30T10:22:31Z2018-07-30T20:41:20ZVerwendung: Mobile Navigation für Tablets<div><p>Sehr geehrtes Team,</p>
<p>Diese Information reicht leider nicht aus.<br>
Siehe [Link entfernt]</p>
<p>LG<br>
Chriss</p></div>Christian Btag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-31T05:20:31Z2018-07-31T05:20:31ZVerwendung: Mobile Navigation für Tablets<div><p>Bei Ihrer Seite handelt es sich nicht um das Tao-Theme das in diesem Beitrag behandelt wird. Bitte erstellen Sie ein neues Ticket über <a href="https://my.rocksolidthemes.com/support">https://my.rocksolidthemes.com/support</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/375226872018-07-31T10:38:05Z2018-07-31T11:21:03ZVerwendung: Mobile Navigation für Tablets<div><p>// Leider führt dieser Link ins Nichts</p></div>Christian Btag:help.rocksolidthemes.com,2012-07-23:Comment/375226872023-06-23T08:23:10Z2023-06-23T08:23:11ZVerwendung: Mobile Navigation für Tablets<div><p>Hallo<br>
Arbeite mich eben in TAO ein :-)<br>
Für die responsive Darstellung des Headers für Tablets (Hamburger-Menu) habe ich die oben genannten CSS-Styles in die custom.css kopiert:</p>
<p>@media screen and (max-width: 900px) { .main-navigation-mobile-open { display: block; } .main-navigation-mobile.is-enabled { display: block; } }</p>
<p>@media screen and (max-width: 599px) { .main-navigation { display: none; }</p>
<p>Das Resultat sieht nicht erwartungsgemäss aus > Mobile_1.jpg)<br>
Ich möchte dass es so aussieht wie > Mobile_2.jpg<br>
Beim Handy wäre es besser den Hamburger rechts zu haben > Mobile_3.jpg</p>
<p>Wie bekomme ich das hin?<br>
LG<br>
Thomas</p></div>Thomas Ritztag:help.rocksolidthemes.com,2012-07-23:Comment/375226872023-06-23T09:50:29Z2023-06-23T09:50:29ZVerwendung: Mobile Navigation für Tablets<div><p>Vielen Dank für Ihre Frage.</p>
<p>Die gewünschte Darstellung sollte sich mit folgendem CSS-Code realisieren lassen:</p>
<pre>
<code>@media screen and (max-width: 900px) {
.main-navigation-mobile-open {
display: block;
top: 130px;
right: 250px;
left: auto;
}
.main-navigation-mobile.is-enabled {
display: block;
}
.main-navigation {
display:none;
}
.main-navigation-search {
bottom: 30px;
}
}
@media screen and (max-width: 599px) {
.main-navigation-mobile-open {
top: 42px;
right: 25px;
}
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/375226872023-06-24T06:16:07Z2023-06-24T06:16:09ZVerwendung: Mobile Navigation für Tablets<div><p>Vielen Dank, es sieht schon besser aus :-)<br>
Seltsamerweise steht «Kundenservice» nicht neben der Mailadresse, sondern unten rechts. > Nav_0</p>
<p>Die Social-Icons können ausgeblendet werden, dann hätte es Platz.<br>
Zudem sollte das Suchfeld geschlossen sein. > Nav_1</p>
<p>Und noch besser wäre das Hamburgermenu ganz rechts, da es vom ausfahrenden Suchfeld überdeckt würde.> Nav_3</p>
<p>Danke für Eure Hilfe<br>
LG Thomas</p></div>Thomas Ritztag:help.rocksolidthemes.com,2012-07-23:Comment/375226872023-06-26T14:15:18Z2023-06-26T14:15:18ZVerwendung: Mobile Navigation für Tablets<div><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>Die gewünschte Darstellung sollte sich mit folgendem CSS-Code realisieren lassen:</p>
<pre>
<code>@media screen and (max-width: 900px) {
.main-navigation-mobile-open {
display: block;
top: 90px;
right: 25px;
left: auto;
}
.main-navigation-mobile.is-enabled {
display: block;
}
.main-navigation {
display:none;
}
.main-navigation-search {
bottom: 30px;
right: 85px;
border:0;
}
.main-navigation-search input {
margin-left: -10.35714em;
border-color: transparent;
}
.header-links {
float: left;
}
.header-links.-secondary {
display: none;
}
}
@media screen and (max-width: 599px) {
.main-navigation-mobile-open {
top: 42px;
right: 25px;
}
}</code>
</pre></div>RockSolid Themes