fw-thomas
Beiträge: 318
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: 318
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]“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste