Mobirise-Tutorials.com

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

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:

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;
        }
      }
    }
  }

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.

... ich meine nicht das offcanvas Menü sondern den Button rechts oben! Siehe Screen!
Kannst du mir da helfen? Grüße

... 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".

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.

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:

Code: Alles auswählen

.offcanvas_box, .top_widget {
    display: none;
}

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:

Code: Alles auswählen

.offcanvas_box {
    display: none;
}

... 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.

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.

Moin Werner,

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:

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

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:

Code: Alles auswählen

@media (min-width: 992px) {
  #mySmartButton {
    display: none;
    margin-bottom: 0px;
  }
}

... 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:

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>

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:

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.

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

Hallo Tommy, klasse, ich versuche das morgen und melde ich dann wieder. Super! Gruß

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

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;

Code: Alles auswählen

.navbar-buttons {
  text-align: center;
  min-width: 170px;
}

Ich habe das jetzt mal auf linksbündig gestellt. Links wäre dann also text-align: left;

Code: Alles auswählen

.navbar-buttons {
  text-align: left;
  min-width: 170px;
}

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:

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.

... 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/

Code: Alles auswählen

<span class="mbrib-home mbr-iconfont mbr-iconfont-btn" style="color: rgb(255, 255, 255);"></span>

Dieses Tag wird direkt an in den Link vom Button 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"><span class="mbrib-home mbr-iconfont mbr-iconfont-btn" style="color: rgb(255, 255, 255);"></span>
    Mobirise Tutorials</a>
</div>

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.

... 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

<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>

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:

Code: Alles auswählen

.navbar-buttons {
  text-align: center;
  min-width: 170px;
}

Dann nicht vergessen den Cache vom Browser zu löschen, sonst wird die alte CSS verwendet und angezeigt.

Mobirise-Tutorials.com

Mobile Navi ohne Button (Theme Bistro M5)

Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)

Re: Mobile Navi ohne Button (Theme Bistro M5)