Verwendung: Menüpunkte in Oneo neben der Lupe darstellen und Logo vergrößert sich

Michael's Avatar

Michael

23 May, 2017 05:36 PM

Produkt: Oneo Contao
Contao-Version: 3.5.25
Browser und Browserversionen: Firefox

Hallo Support Team,

ich habe ein Problem auf folgender Oneo Seite:

www.aerotours-technik.de

Wie kann ich die Menüpunkte Sitemap und Flugzeugreservierung als Symbol neben der Suchlupe oben rechts im Menü einblenden? Das Menü wird leider zu breit, wenn diese in der Menüstruktur mit auftauchen.

Außerdem vergrößert und verpixelt sich das Logo wenn man das Fenster kleiner schiebt. Wie kann man das verhindern? Weiterhin ist in der mobilen Ansicht ist das Logo so klein, dass man es leider gar nicht mehr erkennt. Die Suchlupe verschiebt sich nach unten rechts und es ist ein großer weißer Balken dazwischen..

Ich hoffe ihr könnt mir helfen..

  1. Support Staff 1 Posted by RockSolid Theme... on 24 May, 2017 09:08 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Sie können einen Hauptmenüpunkt durch ein Icon austauschen indem Sie der Seite eine CSS-Klasse z. B. nav-sitemap vergeben und folgenden CSS-Code in die Datei files/oneo/css/custom.css einfügen:

    .main-navigation > ul > li.nav-sitemap > a,
    .main-navigation > ul > li.nav-sitemap > span {
        text-indent: -99em;
        overflow: hidden;
        line-height: 0;
    }
    .main-navigation > ul > li.nav-sitemap > a:after,
    .main-navigation > ul > li.nav-sitemap > span:after {
        font: 1.4em/1 "RockSolid Icons";
        content: "\e0cb";
        text-indent: 0;
        display: block;
    }
    

    Den Icon-Code "\e0cb" können Sie dabei mit einem beliebigen Icon ersetzen. Die Codes aller Icons finden Sie in der Datei files/oneo/fonts/rocksolid-icons.html.

    Das Logo verpixelt, da die Navigation zu breit ist und umbricht. Über folgenden CSS-Code können Sie die Größe des Logos fixieren:

    .logo img {
        display: inline;
        height: 10em;
    }
    

    Der Abstand über der Such-Lupe sollte sich hiermit entfernen lassen:

    @media screen and (max-width: 900px) {
        .main-navigation, .main-navigation-search {
            margin-top: 0;
        }
        .page-header .mod_changelanguage {
            margin-top: 0;
        }
    }
    
  2. 2 Posted by Michael on 24 May, 2017 04:01 PM

    Michael's Avatar

    Vielen Dank die CSS Scripte haben super funktioniert und erfüllen ihre Aufgabe.
    Eine letzte Sache noch. Wenn das Fenster ein bisschen in der Breite zusammengeschoben wird bzw. die Auflösung nicht so groß ist (z.B. auf älteren PCs oder Laptops) wird das Menü in 2 Reihen dargestellt. Der weiße Abstand wird dabei so groß, dass das Menü ca. 1/3 der Seite einnimmt. Wie kann man diesen Abstand verkleinern?

    Vielen Dank!

  3. Support Staff 3 Posted by RockSolid Theme... on 26 May, 2017 08:41 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Bitte versuchen Sie es mit folgendem CSS-Code:

    @media screen and (max-width: 1600px) {
        .main-navigation > ul > li {
            margin-left: 0;
        }
    }
    @media screen and (max-width: 1350px) {
        .main-navigation, .main-navigation-search {
            margin-top: 0;
        }
        .page-header .mod_changelanguage {
            margin-top: 0;
        }
        .main-navigation {
            zoom: 1;
            position: relative;
            float: none;
            clear: both;
            padding-left: 1.46667em;
        }
        .main-navigation:before {
            content: "";
            display: table;
        }
        .main-navigation:after {
            content: "";
            display: table;
            clear: both;
        }
        .logo {
            position: static;
            float: left;
            margin-left: 4.16667%;
            padding-top: 1.6em;
            padding-bottom: 0.4em;
        }
    }
    @media screen and (max-width: 599px) {
        .logo {
            float: none;
            text-align: center;
            margin-left: 0;
            padding-top: 0.8em;
        }
    }
    
  4. 4 Posted by JH on 04 Sep, 2018 05:49 AM

    JH's Avatar

    Ich habe die nav-sitemap-Vorlage (oben) benutzt um unter TAO 1.5.6 einen Seitentitel in der Hauptnavigation mit einem Icon zu ersetzen. Der Icon ist jetzt da, aber leider bleibt der Seitentitel als Schrift bestehen. Liegt es an itemprop? Was kann ich tun um den Schriftzug verschwinden zu lassen?

  5. Support Staff 5 Posted by RockSolid Theme... on 05 Sep, 2018 01:26 PM

    RockSolid Themes's Avatar

    Durch die Angabe von text-indent: -99em; sollte der Text bereits ausgeblendet werden und nur das Icon sichtbar sein.

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  6. 6 Posted by Juergen Haubeil on 05 Sep, 2018 01:58 PM

    Juergen Haubeil's Avatar

    -

  7. 7 Posted by JH on 05 Sep, 2018 05:03 PM

    JH's Avatar

    ist bereits per eMail nebst Zugangsdaten geschehen

  8. Support Staff 8 Posted by RockSolid Theme... on 06 Sep, 2018 01:21 PM

    RockSolid Themes's Avatar

    Versuchen Sie es bitte mit folgendem CSS-Code:

    .main-navigation > ul > li.nav-shop > a,
    .main-navigation > ul > li.nav-shop > span,
    .main-navigation > ul > li.nav-shop > strong {
        text-indent: -99em;
        overflow: hidden;
        line-height: 0;
        padding-top: 1.5em;
    }
    .main-navigation > ul > li.nav-shop > a:after,
    .main-navigation > ul > li.nav-shop > span:after,
    .main-navigation > ul > li.nav-shop > strong:after {
        font: 1.4em/1 "RockSolid Icons";
        content: "\e039";
        text-indent: 0;
        display: block;
        position: static;
        background: none;
        height: auto;
    }
    .main-navigation > ul > li.nav-shop > a:before,
    .main-navigation > ul > li.nav-shop > span:before,
    .main-navigation > ul > li.nav-shop > strong:before {
        content: none;
    }
    
  9. 9 Posted by Juergen Haubeil on 06 Sep, 2018 01:31 PM

    Juergen Haubeil's Avatar

    Ja, das war die Lösung!

    Vielen Dank an das Supportteam

    JH

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac