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

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

 

was passiert wenn du die komplette klasse ausblendest? navbar-topbar-item desktop-only?

 

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.

 

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

 

Du musst nicht immer die Verzeichnisse leeren. Wenn du am Template gearbeitet hast, reicht es eigentlich immer den Seitencache im Shop zu leeren.

 

Hallo Michael, Dank Dir für den Tipp/Hinweis, Torben`s "hidden-xs" Hinweis war die Lösung. Viele Grüße

 

Damit würdest du alle Elemente der Topbar in der mobilen Ansicht ausblenden.

 

Wieder was gelernt

 

hier gibt es ein paar nützliche Informationen zum Arbeiten mit Bootstrap...
(Link nur für registrierte Nutzer sichtbar.)

 

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