Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: http://redaxo.org/slack/
fw-thomas
Beiträge: 329
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Demonavi Breiten Einstellung

10. Mär 2017, 15:25

Hallo zusammen,
ich habe zu R5 die Commy Demo Installiert,
dort wird ab eine bestimmte Bildschirmbreite die Navibar umgeschaltet auf die Kurzform (3 Querstriche)

Wo kann ich die Pixelbreite einstellen, das bei einer anderen Größe bereits umgestellt werden soll ..

mfg
und ein schönes WE

Benutzeravatar
karlnappmitdenasskap
Beiträge: 116
Registriert: 18. Aug 2012, 20:30
Kontaktdaten: Website

Re: Demonavi Breiten Einstellung

10. Mär 2017, 17:44

Schau mal in der

Code: Alles auswählen

/resources/css/base.css
So ab Zeile 3870 steht da zur Klasse

Code: Alles auswählen

navbar-collapse
alles unter dem Mediabreakpoint

Code: Alles auswählen

@media (max-width: 767px) {
d.h. dass die Navigation bis zu einer Breite von max 767px eingeblendet wird. Da musst Du die Navigation rausnehmen und in den Mediabreakpoint einsetzen, der Deine gewünschte Breite hat.

fw-thomas
Beiträge: 329
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Re: Demonavi Breiten Einstellung

23. Mär 2017, 15:23

Hallo,
ich habe die zeile gefunden, leider wird die Navibar weiterhin auf ein Tablet angezeigt und nicht die 3 Querstriche.

Code: Alles auswählen

@media (max-width: 767px) {
    .navbar-ct-transparent .navbar-toggle .icon-bar {
        background: #fff; }

    body {
        position: relative;
        font-size: 14px; }

    h6 {
        font-size: 1em; }

    .wrapper {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
        -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        left: 0;
        background-color: white; }

    .navbar .container {
        left: 0;
        width: 100%;
        -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
        position: relative; }

    .navbar .navbar-collapse.collapse,
    .navbar .navbar-collapse.collapse.in,
    .navbar .navbar-collapse.collapsing {
        display: none !important; }

    .nav-open .navbar-collapse {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px); }

    .nav-open .navbar .container {
        left: -300px; }

    .nav-open .wrapper {
        left: 0;
        -webkit-transform: translateX(-230px);
        -moz-transform: translateX(-230px);
        -o-transform: translateX(-230px);
        -ms-transform: translateX(-230px);
        transform: translateX(-230px); }

    .navbar-toggle .icon-bar {
        display: block;
        position: relative;
        background: #fff;
        width: 24px;
        height: 2px;
        border-radius: 1px;
        margin: 0 auto; }

    .navbar-header .navbar-toggle {
        margin-top: 12px;
        width: 40px;
        height: 40px; }

    .bar1,
    .bar2,
    .bar3 {
        outline: 1px solid transparent; }

    .bar1 {
        top: 0px;
        -webkit-animation: topbar-back 500ms linear 0s;
        -moz-animation: topbar-back 500ms linear 0s;
        animation: topbar-back 500ms 0s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards; }

    .bar2 {
        opacity: 1; }

    .bar3 {
        bottom: 0px;
        -webkit-animation: bottombar-back 500ms linear 0s;
        -moz-animation: bottombar-back 500ms linear 0s;
        animation: bottombar-back 500ms 0s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards; }

    .toggled .bar1 {
        top: 6px;
        -webkit-animation: topbar-x 500ms linear 0s;
        -moz-animation: topbar-x 500ms linear 0s;
        animation: topbar-x 500ms 0s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards; }

    .toggled .bar2 {
        opacity: 0; }

    .toggled .bar3 {
        bottom: 6px;
        -webkit-animation: bottombar-x 500ms linear 0s;
        -moz-animation: bottombar-x 500ms linear 0s;
        animation: bottombar-x 500ms 0s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards; }

Zurück zu „Templates/Navigationen [R5]“