Demonavi Breiten Einstellung

Wie verwendet man Templates oder erstellt Navigationen und passt diese an.

Demonavi Breiten Einstellung

Beitragvon fw-thomas » 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
fw-thomas
 
Beiträge: 322
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland

Re: Demonavi Breiten Einstellung

Beitragvon karlnappmitdenasskap » 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.
Benutzeravatar
karlnappmitdenasskap
 
Beiträge: 116
Registriert: 18. Aug 2012, 20:30

Re: Demonavi Breiten Einstellung

Beitragvon fw-thomas » 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; }
fw-thomas
 
Beiträge: 322
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland


Zurück zu Templates/Navigationen [R5]

Wer ist online?

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

cron