Erweiterung TopBar <li> für mobile Ansicht ausblenden, aber wie?

Thema wurde von Anonymous, 19. September 2016 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Juni 2016
    Beiträge:
    99
    Danke erhalten:
    16
    Danke vergeben:
    23
    Hallo zusammen,

    ich bekomme es einfach nicht hin und wäre für einen Tipp sehr, sehr dankbar:

    Ich habe die Top-Bar wie folgt erweitert:

    HTML:
      <div class="navbar-topbar">
         <nav data-gambio-widget="menu link_crypter" data-menu-switch-element-position="false" data-menu-events='{literal}{"desktop": ["click"], "mobile": ["click"]}{/literal}' data-menu-ignore-class="dropdown-menu">
           <ul class="nav navbar-nav navbar-right">
    
    <!-- Anfang Zusatzinfo -->
                        <li class="navbar-topbar-item desktop-only">
                            <a href="/#IhreVorteile" title="Ihre Vorteile">
                            <span class="fa fa-check-square fa-lg">&nbsp;</span>Ihre Vorteile</a>
                        </li>
                        <li class="navbar-topbar-item">
                            <a href="/#Angebote" title="Angebote">
                            <span class="fa fa-check-square fa-lg">&nbsp;</span>Angebote
                            </a>
                        </li>
    <!-- Ende Zusatzinfo     -->
    
    if $showTopSearch && $showTopSearch != ''}
               <li class="navbar-topbar-item">
    ...
    
    Passt soweit auch alles, allerdings möchte ich beide Links in der mobilen Ansicht (Menu) ausblenden bzw. nicht anzeigen. Habe schon alles mögliche versucht, u.a.

    Code:
    @media (max-width: 991px) {
        .desktop-only li {
            display:none !important;
        }
    }
    Ich bekomme es aber leider nicht hin, beide Listenpunkte auszublenden. Hat jemand einen patenten ;-) Tipp für mich? Vorab vielen Dank!

    Beste Grüße
     
  2. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    22. März 2015
    Beiträge:
    2.381
    Danke erhalten:
    640
    Danke vergeben:
    412
    was passiert wenn du die komplette klasse ausblendest? navbar-topbar-item desktop-only?
     
  3. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.175
    Danke vergeben:
    399
    Moin Wolfgang,

    versuchs mal mit

    HTML:
    <li class="hidden-xs">
        [...]
    </li>
    Das sollte dafür sorgen, dass die Elemente in der mobilen Ansicht ausgeblendet werden.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Juni 2016
    Beiträge:
    99
    Danke erhalten:
    16
    Danke vergeben:
    23
    Torben, Dank Dir, funktioniert! Hatte ich vorab schon mal vergeblich versucht, Grund wie ich gerade feststellem musste (klass. Anfänger Fehler ;-)): Hatte den templates_c Ordner nicht geleert! Na ja, vielleicht geht es zukünftig nochmal jemand anderes ähnlich, dann findet er zumindest diesen Forumbeitrag. Beste Grüße
     
  5. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.175
    Danke vergeben:
    399
    Du musst nicht immer die Verzeichnisse leeren. Wenn du am Template gearbeitet hast, reicht es eigentlich immer den Seitencache im Shop zu leeren. ;)
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Juni 2016
    Beiträge:
    99
    Danke erhalten:
    16
    Danke vergeben:
    23
    Hallo Michael, Dank Dir für den Tipp/Hinweis, Torben`s "hidden-xs" Hinweis war die Lösung. Viele Grüße
     
  7. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.175
    Danke vergeben:
    399
    Damit würdest du alle Elemente der Topbar in der mobilen Ansicht ausblenden.
     
  8. Anonymous

    Anonymous Beta-Held

    Registriert seit:
    22. März 2015
    Beiträge:
    2.381
    Danke erhalten:
    640
    Danke vergeben:
    412
    Wieder was gelernt
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. April 2011
    Beiträge:
    991
    Danke erhalten:
    206
    Danke vergeben:
    100
    hier gibt es ein paar nützliche Informationen zum Arbeiten mit Bootstrap...
    (Link nur für registrierte Nutzer sichtbar.)
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Juni 2016
    Beiträge:
    99
    Danke erhalten:
    16
    Danke vergeben:
    23
    Hallo Rene, vielen Dank für den Hinweis. Kenne ich natürlich ;-), habe nur festgestellt, dass viele der "Standard" Bootstrap Komponenten eben nicht ohne Weiteres mit den derzeitigen Honeygrid Bordmittel funktionieren, zum Beispiel: (Link nur für registrierte Nutzer sichtbar.) Viele Grüße