[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REDAXO Forum • Demonavi Breiten Einstellung
Seite 1 von 1

Demonavi Breiten Einstellung

Verfasst: 10. Mär 2017, 15:25
von fw-thomas
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

Re: Demonavi Breiten Einstellung

Verfasst: 10. Mär 2017, 17:44
von karlnappmitdenasskap
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.

Re: Demonavi Breiten Einstellung

Verfasst: 23. Mär 2017, 15:23
von fw-thomas
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; }