Mobile Navi ohne Button (Theme Bistro M5)
Mobile Navi ohne Button (Theme Bistro M5)
Hallo, leider wird der im Header beim Theme BISTRO M5 in der mobilen der Button rechts oben nicht mehr angezeigt.
Kann man das irgendwo anpassen.
Danke für die Hilfe
Kann man das irgendwo anpassen.
Danke für die Hilfe
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Moin,
das solltest Du lieber nicht versuchen, denn das wird sehr schwierig
Lies mal über die Bootstrap5-Komponente "offcanvas" hier:
https://getbootstrap.com/docs/5.0/components/offcanvas/
Das ist bis zu einer Bildschirmbreite von 991 Pixeln aus gutem Grund ausgeblendet:
Es würde sich dann diese zusätzliche Slidebar auch mit der Slidebar des Hamburger-Buttons zur Navigation überschneiden und die Eigentliche Navi ist weg - das darf nicht sein, da man sonst am Handy keine Navi mehr hätte.
Das würde dann so aussehen:
Möglich ist das aber sicherlich - wenn man viel Arbeit investiert und alles komplett umschreibt. Also die Breite des "offcanvas" und auch dessen Position. Das mache ich jetzt aber nicht.
das solltest Du lieber nicht versuchen, denn das wird sehr schwierig
Lies mal über die Bootstrap5-Komponente "offcanvas" hier:
https://getbootstrap.com/docs/5.0/components/offcanvas/
Das ist bis zu einer Bildschirmbreite von 991 Pixeln aus gutem Grund ausgeblendet:
Code: Alles auswählen
@media (min-width: 992px) {
nav.navbar {
flex-wrap: nowrap;
}
.offcanvas {
padding: 120px 60px 35px;
width: 480px;
background-color: @offcanvasColor;
}
.offcanvas_image img {
width: auto;
object-fit: cover;
display: inline-block;
}
.offcanvas-header {
position: relative;
padding: 0;
.btn-close {
position: absolute;
top: -70px;
right: 0;
width: 35px;
height: 30px;
}
}
.offcanvas-body {
text-align: center;
padding: 0;
.mbr-text, .mbr-section-subtitle {
margin-top: 14px;
}
.offcanvas_contact {
margin: 35px 0;
}
}
.offcanvas_box {
button.btn_offcanvas {
outline: none;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.2s;
position: relative;
align-self: center;
color: @menuBgColor;
.hamburger span {
position: absolute;
right: 0;
width: 40px;
height: 1px;
border-right: 5px;
background-color: @hamburgerColor;
&:nth-child(1) {
top: 18px;
transition: all 0.2s;
}
&:nth-child(2) {
top: 25px;
transition: all 0.2s;
}
}
&:hover .hamburger span {
width: 36px;
&:nth-child(2) {
width: 33px;
transition-delay: 0.2s;
}
}
}
}
Das würde dann so aussehen:
Möglich ist das aber sicherlich - wenn man viel Arbeit investiert und alles komplett umschreibt. Also die Breite des "offcanvas" und auch dessen Position. Das mache ich jetzt aber nicht.
Re: Mobile Navi ohne Button (Theme Bistro M5)
... ich meine nicht das offcanvas Menü sondern den Button rechts oben! Siehe Screen!
Kannst du mir da helfen? Grüße
Kannst du mir da helfen? Grüße
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
... aber der Button wird doch automatisch auch am Handy angezeigt
Vielleicht habe ich eine andere Menüleiste - ich habe heute keine Zeit das nachzustellen. Bitte mache mal einen Screenshot der von Dir verwendeten Menüleiste aus dem Thema "BistroM5".
Vielleicht habe ich eine andere Menüleiste - ich habe heute keine Zeit das nachzustellen. Bitte mache mal einen Screenshot der von Dir verwendeten Menüleiste aus dem Thema "BistroM5".
- Werner-Zenk.de
- Mitglied (Level 10)
- Beiträge: 755
- Registriert: Di 8. Dez 2020, 19:42
- Wohnort: Bamberg
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Oft reicht es auch die Seite im Browser anzuzeigen und die Browserkonsole (F12) zu öffnen, dort ist es möglich, sich die Website im Handy-Modus anzuzeigen. Und nein, das ist nicht nur die Website verkleinert darzustellen, da werden einem all die Fehler (HTML, CSS und JavaScript) angezeigt, die am Handy auftreten werden.
Werner
https://werner-zenk.de
https://werner-zenk.de
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Moin,
ich habe mir diese Navi mit den zwei Bereichen mal angeguckt.
Der Button wird nicht einzeln am Handy ausgeblendet, sondern der gesamte obere Bereich mit der class="top_widget", ebenso wie auch die "offcanvas" Menü-Box und am Display unter 992px ausgeblendet:
Wenn Du diesen Button am Handy haben wolltest geht das so nicht. Da müsste man dann die gesamte Navi komplett neu programmieren.
Du könntest zwar die class="top_widget" oben entfernen, also dann so:
... dann würde aber die Schrift (Adresse) und das Logo (völlig verzerrt) aus diesem Bereich auch mit am Handy über der eigentlichen Menüleiste angezeigt werden. Insofern müsste das dann alles einzeln nochmals neu angesprochen werden. Das ist sehr kompliziert.
ich habe mir diese Navi mit den zwei Bereichen mal angeguckt.
Der Button wird nicht einzeln am Handy ausgeblendet, sondern der gesamte obere Bereich mit der class="top_widget", ebenso wie auch die "offcanvas" Menü-Box und am Display unter 992px ausgeblendet:
Code: Alles auswählen
.offcanvas_box, .top_widget {
display: none;
}
Du könntest zwar die class="top_widget" oben entfernen, also dann so:
Code: Alles auswählen
.offcanvas_box {
display: none;
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Moin Werner,Werner-Zenk.de hat geschrieben: ↑Fr 22. Apr 2022, 17:39 Oft reicht es auch die Seite im Browser anzuzeigen und die Browserkonsole (F12) zu öffnen, dort ist es möglich, sich die Website im Handy-Modus anzuzeigen.
danke für diesen Tipp - ich hatte selbst noch gar nicht entdeckt, dass man dort eine Handy-Ansicht einstellen kann
... übrigens an vielen Laptops erreicht man die Browser-Konsole nicht mit F12 sondern nur mir der Tastenkombination:
Fn+F12
oder eben auch über die Extras in der Menüleiste. Ansicht vom Firefox-Browser:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Hallo Tommy,
danke für deine Mühe, dann ist das also nicht möglich!
Sehr schade! Der Button wäre in der Mobilnavi sehr wichtig gewesen.
Gruß
Inno
danke für deine Mühe, dann ist das also nicht möglich!
Sehr schade! Der Button wäre in der Mobilnavi sehr wichtig gewesen.
Gruß
Inno
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Moin,
Du - im Prinzip kann man doch auch einfach einen neuen Button im unteren Teil dieser Navi selbst hinzufügen, der eben nur am Handy sichtbar wird. Ich habe das hier auf dieser Testseite mal für Dich gemacht (ab einer Display-Breite von 991 Pixeln):
https://www.mobirise-tutorials.com/BistroTestM5-Menu/
Verkleinere also Dein Browser-Fenster oder gucke am Smartphone.
Der Button erscheint jetzt am Handy im Hamburger-Menü mittig. Natürlich könnte man den auch außerhalb des Hamburger-Menüs anzeigen oder auch linksbündig.
Hier mal meine derzeitigen Anpassungen:
1) im Bereich "CSS Editor" vom "Code Editor" habe ich eine Anweisung geschrieben, dass dieser Button eben erst ab 992 Pixeln Breite überhaupt angezeigt wird und dieser Anweisung die id="mySmartButton" gegeben. Das ist der Breakpoint an dem diese Navi ohnehin umbricht:
... wundere Dich nicht, dass nach dem Speichern diese Anweisung an anderer Stelle vom Generator platziert wird, da es diesen Breakpoint bereits gibt wird das vom Mobirise-Generator dorthin verschoben. Du kannst das aber zunächst auch ganz unten im "CSS Editor" einfügen. Den Rest erledigt Mobirise.
2) Ich habe dann also dem <div>, mit meinem (eigenen) Button-Code, auch meine id="mySmartButton" aus der CSS gegeben und das im Bereich der unteren Navi im "HTML Editor" in das <ul> Tag geschrieben:
Du - im Prinzip kann man doch auch einfach einen neuen Button im unteren Teil dieser Navi selbst hinzufügen, der eben nur am Handy sichtbar wird. Ich habe das hier auf dieser Testseite mal für Dich gemacht (ab einer Display-Breite von 991 Pixeln):
https://www.mobirise-tutorials.com/BistroTestM5-Menu/
Verkleinere also Dein Browser-Fenster oder gucke am Smartphone.
Der Button erscheint jetzt am Handy im Hamburger-Menü mittig. Natürlich könnte man den auch außerhalb des Hamburger-Menüs anzeigen oder auch linksbündig.
Hier mal meine derzeitigen Anpassungen:
1) im Bereich "CSS Editor" vom "Code Editor" habe ich eine Anweisung geschrieben, dass dieser Button eben erst ab 992 Pixeln Breite überhaupt angezeigt wird und dieser Anweisung die id="mySmartButton" gegeben. Das ist der Breakpoint an dem diese Navi ohnehin umbricht:
Code: Alles auswählen
@media (min-width: 992px) {
#mySmartButton {
display: none;
margin-bottom: 0px;
}
}
2) Ich habe dann also dem <div>, mit meinem (eigenen) Button-Code, auch meine id="mySmartButton" aus der CSS gegeben und das im Bereich der unteren Navi im "HTML Editor" in das <ul> Tag geschrieben:
Code: Alles auswählen
<!-- Eigener Button nur am Handy -->
<div id="mySmartButton" class="navbar-buttons mbr-section-btn"><a class="btn btn-lg btn-primary" href="https://www.mobirise-tutorials.com/" data-app-placeholder="Type Text" target="_blank">
Mobirise Tutorials</a>
</div>
- Werner-Zenk.de
- Mitglied (Level 10)
- Beiträge: 755
- Registriert: Di 8. Dez 2020, 19:42
- Wohnort: Bamberg
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Das dürfte an dem kompakten Format der Tastatur liegen, dass ein Laptop mit sich bringt. Sonst würde der Benutzer beim Schreiben andauernd eine F-Taste versehentlich drücken.Tommy Herrmann hat geschrieben: ↑Sa 23. Apr 2022, 07:10 ... übrigens an vielen Laptops erreicht man die Browser-Konsole nicht mit F12 sondern nur mir der Tastenkombination:
Werner
https://werner-zenk.de
https://werner-zenk.de
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Na ja - am Laptop sind ja auf den Funktionstasten noch andere und zusätzliche Funktionen wie z.B.:
F11 = Einen Bildschirm-Ausschnitt nach oben scrollen
F12 = Einen Bildschirm-Ausschnitt nach unten scrollen
Strg + F11 = ein Browser Tab vor blättern
Strg + F12 = ein Browser Tab zurück blättern
Fn + F11 = Vollbildmodus
Fn + F12 = Browser-Konsole
F11 = Einen Bildschirm-Ausschnitt nach oben scrollen
F12 = Einen Bildschirm-Ausschnitt nach unten scrollen
Strg + F11 = ein Browser Tab vor blättern
Strg + F12 = ein Browser Tab zurück blättern
Fn + F11 = Vollbildmodus
Fn + F12 = Browser-Konsole
Re: Mobile Navi ohne Button (Theme Bistro M5)
Hallo Tommy, klasse, ich versuche das morgen und melde ich dann wieder. Super! Gruß
Re: Mobile Navi ohne Button (Theme Bistro M5)
Hallo Tommy, funktioniert, allerdings erscheint der Button nur mittig, weil dein Text so lang ist! Gib mal SHOP ein, dann ist er linksbünding. Was muss ich machen um ihn mittig zu bekommen?
Gibt es auch noch die möglichkeit ein ICON einzubauen?
Grüße
Gibt es auch noch die möglichkeit ein ICON einzubauen?
Grüße
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Moin,
nee Du - den kann ich platzieren wo ich will. Das hat mit der Länge des Buttons überhaupt nichts zu tun, sondern nur mit der CSS, zumal dieser ja hier auch noch auf mindestens 170px Breite definiert ist. Mit dem Wort "Shop" bleibt dieser ebenso breit und auch zentriert wie vorher.
Zentriert wird der mit text-align: center;
Ich habe das jetzt mal auf linksbündig gestellt. Links wäre dann also text-align: left;
Da die class="btn" normalerweise (und bei mir auch) einen Abstand nach außen hat, habe ich diesen hier auf 0 gesetzt, damit der Button nun mit den anderen Links auch bündig am Handy angezeigt wird:
Bitte Browser-Cache löschen oder erneuern mit Tastenkombination:
Strg+F5 (am Desktop)
Strg+Fn+F5 (am Laptop)
https://www.mobirise-tutorials.com/BistroTestM5-Menu/
Icon - ja - welches und wo - am Button? Ich muss mal für ca. 1 Stunde weg, was einkaufen. Dann kann ich Dir das mit dem Icon gerne machen.
nee Du - den kann ich platzieren wo ich will. Das hat mit der Länge des Buttons überhaupt nichts zu tun, sondern nur mit der CSS, zumal dieser ja hier auch noch auf mindestens 170px Breite definiert ist. Mit dem Wort "Shop" bleibt dieser ebenso breit und auch zentriert wie vorher.
Zentriert wird der mit text-align: center;
Code: Alles auswählen
.navbar-buttons {
text-align: center;
min-width: 170px;
}
Code: Alles auswählen
.navbar-buttons {
text-align: left;
min-width: 170px;
}
Code: Alles auswählen
.btn {
margin-left: 0rem;
}
Bitte Browser-Cache löschen oder erneuern mit Tastenkombination:
Strg+F5 (am Desktop)
Strg+Fn+F5 (am Laptop)
https://www.mobirise-tutorials.com/BistroTestM5-Menu/
Icon - ja - welches und wo - am Button? Ich muss mal für ca. 1 Stunde weg, was einkaufen. Dann kann ich Dir das mit dem Icon gerne machen.
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
... ein Icon fügt man einfach bei Mobirise über ein <span> Tag ein, was ich nun auch an beiden Buttons getan habe:
https://www.mobirise-tutorials.com/BistroTestM5-Menu/
Dieses Tag wird direkt an in den Link vom Button geschrieben:
Hierbei muss der verwendete Icon-Font natürlich bereits geladen worden sein. Man fügt das also am besten an einen anderen, vorhandenen Button zunächst mal über den Icon-Editor ein, um es dann von dort mit dem Code zu kopieren.
https://www.mobirise-tutorials.com/BistroTestM5-Menu/
Code: Alles auswählen
<span class="mbrib-home mbr-iconfont mbr-iconfont-btn" style="color: rgb(255, 255, 255);"></span>
Code: Alles auswählen
<!-- Eigener Button nur am Handy -->
<div id="mySmartButton" class="navbar-buttons mbr-section-btn"><a class="btn btn-lg btn-primary" href="https://www.mobirise-tutorials.com/" data-app-placeholder="Type Text" target="_blank"><span class="mbrib-home mbr-iconfont mbr-iconfont-btn" style="color: rgb(255, 255, 255);"></span>
Mobirise Tutorials</a>
</div>
Re: Mobile Navi ohne Button (Theme Bistro M5)
... Danke dir schon mal. Es geht aber nur um den Smartbutton, der nur Mobil erscheint und bei mir immer linksbündig ist. Was kann ich hier machen? Grüße
Re: Mobile Navi ohne Button (Theme Bistro M5)
<!-- Eigener Button nur am Handy -->
<div id="mySmartButton" class="navbar-buttons mbr-section-btn"><a class="btn btn-lg btn-primary" href="https://www.mobirise-tutorials.com/" data-app-placeholder="Type Text" target="_blank">
SHOPPING</a>
</div>
<div id="mySmartButton" class="navbar-buttons mbr-section-btn"><a class="btn btn-lg btn-primary" href="https://www.mobirise-tutorials.com/" data-app-placeholder="Type Text" target="_blank">
SHOPPING</a>
</div>
- Tommy Herrmann
- Site Admin
- Beiträge: 5894
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Mobile Navi ohne Button (Theme Bistro M5)
Moin,
Du - dann müsstest Du mal einen Link zu Deiner Seite posten (URL), damit man in den Quelltext und die CSS gucken kann. Es ist ohnehin fast immer unerlässlich einen Link zu seinem Problem zu posten, sonst kann man ja immer nur raten und bei Hunderten von CSS-Klassen kann man das meist eben nicht erraten.
Sollte Deine Seite nicht "online" sein, dann publiziere diese doch schnell mal in ein Testverzeichnis.
Hast Du denn mal der class="navbar-buttons" ein "text-align: center;" verpasst? Also diese CSS einfach in dem "Code Editor" vom Navi-Block in den rechten Bereich "CSS Editor" unten dran schreiben:
Dann nicht vergessen den Cache vom Browser zu löschen, sonst wird die alte CSS verwendet und angezeigt.
Du - dann müsstest Du mal einen Link zu Deiner Seite posten (URL), damit man in den Quelltext und die CSS gucken kann. Es ist ohnehin fast immer unerlässlich einen Link zu seinem Problem zu posten, sonst kann man ja immer nur raten und bei Hunderten von CSS-Klassen kann man das meist eben nicht erraten.
Sollte Deine Seite nicht "online" sein, dann publiziere diese doch schnell mal in ein Testverzeichnis.
Hast Du denn mal der class="navbar-buttons" ein "text-align: center;" verpasst? Also diese CSS einfach in dem "Code Editor" vom Navi-Block in den rechten Bereich "CSS Editor" unten dran schreiben:
Code: Alles auswählen
.navbar-buttons {
text-align: center;
min-width: 170px;
}
Wer ist online?
Mitglieder in diesem Forum: Bing [Bot] und 24 Gäste