Breite des Dropdownmenüs Kategorie wie ändern?

Thema wurde von Anonymous, 13. Februar 2019 erstellt.

  1. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    3. März 2018
    Beiträge:
    318
    Danke erhalten:
    20
    Danke vergeben:
    222
    Hallo,

    ich versuche wie im Titel erwähnt die Breite der Unterkategorie im Dropdownmenü zu ändern.
    Ich verwende den Testshop3.
    Unter Style-Edit
    Unbenannt-1.jpg


    Im CSS steht folgendes
    Code:
    @media (min-width: $grid-float-breakpoint) {
       
          .navbar-categories {
            background-color: #529e17;
            .navbar-nav {
                @include border-radius(5px);
       
                .custom-entries {
                      a {
                        line-height: 35px;
                   
                    }
                  }
            }
        }
       
    
        #cart-container.navbar-cart > ul > li > a.dropdown-toggle {
            color: #000;
            text-shadow: 1px 1px 3px #000;
     
        }
        #header.sticky {
            #cart-container.navbar-cart > ul > li > a.dropdown-toggle {
                // color: $text-color;
                text-shadow: none;
            }
        }
    }
    Laut einem anderen Forumsbeitrag muss die CSS angepasst werden.

    Da wurde folgender Code empfohlen
    Code:
    .navbar-categories > ul > li {
        position: static;
        }
    
        .navbar-categories > ul > li > ul.dropdown-menu {
        width: 100% !important;
        }
    Das sieht bei mir unmöglich aus. Ich habe es nicht geschafft zu korrigieren
    Unbenannt-2.jpg
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    3. März 2018
    Beiträge:
    318
    Danke erhalten:
    20
    Danke vergeben:
    222
    Bin ich bei _header_categories.scss in der richtigen Datei?
    Habe ich es an der falschen stelle eingefügt?


    Code:
    // MEGA DROPDOWN
                   
                    @media (min-width: $grid-float-breakpoint) {
                       
                        // SECOND LEVEL
                       
                        > ul.dropdown-menu {
                            @include background($gx-megadropdown-bg,
                                                $gx-megadropdown-bg-image-url,
                                                $gx-megadropdown-bg-image-position,
                                                $gx-megadropdown-bg-image-repeat,
                                                $gx-megadropdown-bg-image-size,
                                                $gx-megadropdown-bg-image-attachment);
                           
                            //width: ($gx-megadropdown-block-width * $gx-megadropdown-block-count);
                            width: 100% !important;
                           
                            > li {
                               
                                padding: floor($grid-gutter-width/2);
                                width:   $gx-megadropdown-block-width;
                                float:   left;
                                position: static;
                               
                                // clearing is needed because of different box heights
                               
                                &:nth-of-type(#{$gx-megadropdown-block-count}n+2) {
                                    clear: both;
                                }
    Ich komme leider nicht weiter. Die zweite Ebene der Kategorie wird falsch dargestellt. Ich kann die Breite nicht anpassen
     
  3. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    3. März 2018
    Beiträge:
    318
    Danke erhalten:
    20
    Danke vergeben:
    222
    Ich habe auch eine _usermod.scss gefunden.
    Muss ich hier etwas ändern?

    Code:
    // Use this file for additional SCSS code.
    // It will be executed at the end of all standard SCSS code so you can overwrite any style.
    @import "grid_rows";
    
    #stage {
        display: none;
    }
    
    .parallax-window {
        min-height: 400px;
        @media (min-width: $screen-md-min) {
            min-height: 700px;
        }
        background: transparent;
        > div {
            position: relative;
            z-index:  2;
        }
    }
    
    #bgvid {
        position:          fixed;
        top:               50%;
        left:              50%;
        min-width:         100%;
        min-height:        100%;
        width:             auto;
        height:            auto;
        z-index:           -101;
        -ms-transform:     translateX(-50%) translateY(-50%);
        -moz-transform:    translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform:         translateX(-50%) translateY(-50%);
        background-size:   cover;
    }
    
    .navbar-collapse .navbar-categories {
        width: auto;
    }
    
    #cart-container.navbar-cart > ul > li > a.dropdown-toggle .cart {
        display: none;
    }
    
    #header .navbar-categories {
        @include transition(300ms ease all);
    }
    
    #header {
        min-height: 0;
        .navbar-brand {
            a {
                padding-top: 15px;
                @include transition(300ms ease all);
                svg {
                    max-width: 150px;
                }
                svg path,
                svg polygon {
                    fill: #000000;
                }
                svg rect {
                    fill:              none;
                    stroke:            #000000;
                    stroke-width:      10;
                    stroke-miterlimit: 10;
                }
            }
        }
    }
    
    @media (min-width: $grid-float-breakpoint) {
        #header {
            .inside {
                padding: 0 floor($grid-gutter-width / 2);
            }
            .navbar-brand {
                a {
                    padding-top: 19px;
                    svg {
                        @include transition(300ms ease all);
                        max-width: 180px;
                    }
                    svg path,
                    svg polygon {
                        fill: #FFFFFF;
                    }
                    svg rect {
                        stroke: #FFFFFF;
                    }
                }
            }
            .navbar-collapse {
                .navbar-categories {
                    margin-top: 20px;
                    > ul.navbar-nav > li > a {
                        @include transition(300ms ease all);
                        font-size:   17px;
                        font-weight: 300;
                    }
                    > ul.navbar-nav > li.active > a {
                        border-bottom: 2px solid #FFFFFF;
                    }
                    > ul.navbar-nav > li.open > a {
                        color: #000000;
                    }
                    > ul.navbar-nav > li.custom {
                        float: left;
                        a {
                            background: transparent;
                        }
                    }
                }
            }
            &.sticky {
                background-color: rgba(255,255,255,0.7) !important;
                .navbar-brand {
                    a {
                        padding-top: 1px;
                        svg {
                            max-width: 150px;
                        }
                    }
                }
                .navbar-collapse {
                    .navbar-categories {
                        margin-top: 0;
                    }
                }
            }
        }
    }
    
    // SMALL SHOPPING CART
    
    #cart-container.navbar-cart > ul > li {
        > a.dropdown-toggle {
            text-shadow: none;
            .gm-cart {
                color:      #000000;
                font-size:  40px;
                position:   absolute;
                right:      10px;
                top:        inherit;
                margin-top: -11px;
            }
        }
        &.open > a.dropdown-toggle,
        a.dropdown-toggle:hover {
            .gm-cart {
                color: #000000;
            }
        }
        .cart-products-count {
            background-color: #CC0000;
        }
    }
    
    // SEARCH
    @media (min-width: $grid-float-breakpoint) {
        #search {
            display: none !important;
        }
    }
    
    // HOME
    
    body.page-index {
       
        @media (min-width: $grid-float-breakpoint) {
            #header {
                background-color: transparent;
                .navbar-collapse {
                    .navbar-categories.navbar-default {
                        > ul.navbar-nav > li > a {
                            // color: #fff;
                            &:hover {
                                text-shadow: 0 0 5px #FFFFFF;
                            }
                        }
                        > ul.navbar-nav > li.open > a {
                            color: #000000;
                        }
                    }
                }
            }
            #cart-container.navbar-cart > ul > li {
                > a.dropdown-toggle {
                    .gm-cart {
                        color: #000000;
                    }
                }
                &.open > a.dropdown-toggle,
                a.dropdown-toggle:hover {
                    .gm-cart {
                        text-shadow: 0 0 5px #FFFFFF;
                    }
                }
            }
        }
       
        #stage {
            min-height: 1200px;
            background: transparent;
            display:    block;
            .title-image {
                position:    absolute;
                top:         100px;
                left:        50%;
                width:       300px;
                height:      300px;
                margin-left: -150px;
                @media (min-width: $screen-sm-min) {
                    top:         150px;
                    width:       500px;
                    height:      500px;
                    margin-left: -250px;
                }
                @media (min-height: 900px) {
                    top: 250px;
                }
            }
        }
       
        // reset background
        #outer-wrapper {
            background: transparent;
        }
       
        // reset boxed content
        #wrapper {
            width: auto;
            // padding: 0;
            #main {
                background: #FFFFFF;
                .main-inside {
                    padding-top:    0;
                    padding-bottom: 0;
                    .content-page-index {
                        margin-bottom: 0;
                    }
                    #welcometext {
                        // background: #666 url('https://emoncegroup.in/wp-content/uploads/2017/10/bg1.jpg') 50% 50% no-repeat;
                        // background-size: cover;
                        background-color: #444444;
                        padding:          50px 0;
                        @media (min-width: $screen-sm-min) {
                            padding-left:  30px;
                            padding-right: 30px;
                        }
                        @media (min-width: $screen-md-min) {
                            padding: 100px 30px;
                        }
                    }
                    #recommendations {
                        padding:          50px 0;
                        background-color: #EEEEEE;
                        margin-left:      -15px;
                        margin-right:     -15px;
                        @media (min-width: $screen-sm-min) {
                            padding-left:  30px;
                            padding-right: 30px;
                        }
                        @media (min-width: $screen-md-min) {
                            padding: 100px 30px;
                        }
                    }
                    #content {
                        padding: 50px 0;
                        @media (min-width: $screen-sm-min) {
                            padding-left:  30px;
                            padding-right: 30px;
                        }
                        @media (min-width: $screen-md-min) {
                            padding: 100px 30px;
                        }
                        > .container > .row > div {
                            padding:    0 50px;
                            text-align: center;
                            .icon {
                                font-size: 50px;
                                color:     $brand-primary;
                            }
                            h4 {
                                font-family:    "Ubuntu", sans-serif;
                                font-weight:    400;
                                // text-transform: uppercase;
                                position:       relative;
                                display:        block;
                                padding-bottom: $grid-gutter-width;
                                margin-bottom:  $grid-gutter-width;
                                color:          #FFFFFF;
                                @media (min-width: $screen-lg-min) {
                                    font-size: 30px;
                                }
                                &:after {
                                    content:          " ";
                                    display:          block;
                                    height:           2px;
                                    width:            50px;
                                    position:         absolute;
                                    bottom:           0;
                                    left:             50%;
                                    margin-left:      -25px;
                                    // background-color: #333;
                                    background-color: $brand-primary;
                                }
                            }
                            p {
                                font-size:   18px;
                                font-weight: 300;
                                color:       #FFFFFF;
                            }
                        }
                    }
                    #news {
                        padding: 50px 0;
                        @media (min-width: $screen-sm-min) {
                            padding-left:  30px;
                            padding-right: 30px;
                        }
                        @media (min-width: $screen-md-min) {
                            padding: 100px 30px 40px;
                        }
                       
                        .meta {
                            color:      #999999;
                            font-style: italic;
                            margin:     10px 0 5px;
                        }
                        .title {
                            font-size:      14px;
                            font-weight:    bold;
                            text-transform: uppercase;
                        }
                        .image-container {
                            position:      relative;
                            margin-bottom: 10px;
                            .tag {
                                display:          block;
                                position:         absolute;
                                top:              30px;
                                background-color: $brand-primary;
                                color:            #FFFFFF;
                                text-transform:   uppercase;
                                padding:          5px 10px 3px;
                                font-size:        18px;
                                font-weight:      bold;
                            }
                        }
                        .more {
                            text-align: right;
                        }
                       
                        h4 {
                            margin-bottom: 30px;
                        }
                    }
                }
            }
        }
       
    }
    
    // HEADLINES
    
    h1, h2, h3, h4 {
        &:not(.product-info-title-desktop) {
            font-family:    "Ubuntu", sans-serif;
            border-bottom:  none;
            text-align:     center;
            font-weight:    400;
            position:       relative;
            padding-bottom: $grid-gutter-width;
            margin-bottom:  $grid-gutter-width;
            &:after {
                content:          " ";
                display:          block;
                height:           2px;
                width:            100px;
                position:         absolute;
                bottom:           0;
                left:             50%;
                margin-left:      -50px;
                background-color: #333333;
            }
        }
        &.no-delimiter {
            &:after {
                display: none;
            }
        }
    }
    
    // LEFT COL
    
    #left {
        display: none;
    }
    
    // FOOTER
    
    #footer {
        .footer-header {
            // background-color: lighten($gx-footer-bg, 10%);
            display: none;
        }
        .panel > .panel-heading,
        .panel > .panel-body {
            &,
            a,
            ul > li > a {
                color: inherit;
            }
        }
        .inside {
            border-bottom: none;
            > .row > div {
                border-right: none !important;
            }
            ul:not(.social-media-icons) > li {
                padding: 5px 0;
                a,
                span {
                    padding:     0;
                    font-weight: normal;
                    &:before {
                        @extend .gm-icon-before;
                        font-size: 15px;
                        content:   '\e800'; /* chevron-right */
                    }
                }
            }
            .advantages ul > li {
                &:before {
                    @extend .gm-icon-before;
                    font-size: 15px;
                    content:   '\e800'; /* chevron-right */
                }
            }
            nav {
                margin: 0;
            }
            .contactform {
                text-transform: uppercase;
                &:before {
                    @extend .gm-icon-before;
                    font-size: 15px;
                    content:   '\e800'; /* chevron-right */
                }
            }
        }
        .footer-bottom {
            background-color: darken($gx-footer-bg, 10%);
        }
       
        .social-media-icons {
            float:    right;
            top:      0;
            position: relative;
        }
        h4,
        .panel .panel-heading .panel-title {
            text-align: left;
            color:      $brand-primary;
            &:after {
                display: none;
            }
        }
    }
    
    // JUMBOTRONS
    
    .jumbotron {
        background-color: transparent;
        h2 {
            font-family:    "Ubuntu", sans-serif;
            border-bottom:  none;
            text-align:     center;
            color:          #FFFFFF;
            // text-transform: uppercase;
            font-weight:    400;
            font-size:      25px;
            position:       relative;
            padding-bottom: $grid-gutter-width;
            @media (min-width: $screen-sm-min) {
                font-size: 35px;
            }
            @media (min-width: $screen-md-min) {
                font-size: 40px;
            }
            @media (min-width: $screen-lg-min) {
                font-size: 50px;
            }
            &:after {
                content:          " ";
                display:          block;
                height:           2px;
                width:            100px;
                position:         absolute;
                bottom:           0;
                left:             50%;
                margin-left:      -50px;
                background-color: #FFFFFF;
            }
        }
        p {
            font-family: Arial, sans-serif;
            color:       #FFFFFF;
            text-align:  center;
            font-weight: 300;
        }
    }
    
    // PRODUCT LIST
    
    .product-container {
        margin:    0 15px $grid-gutter-width 15px;
        max-width: 224px;
       
        .product-tile {
            background-color: #FFFFFF;
           
            .price-tax {
                border-bottom:  none;
                margin:         0;
                padding-bottom: 0;
            }
        }
    }
    
    body.page-index-type-cat {
        #outer-wrapper {
            background-color: #EEEEEE;
        }
       
        .product-container {
            max-width: 1280px;
        }
    }
    
    // PRODUCT INFO
    
    body.page-product-info {
        #outer-wrapper {
            background-color: #FFFFFF;
        }
    }
    
    #breadcrumb_navi {
        display: none;
    }
    
    .product-info-description .tab-body {
        padding-top: 0;
    }
    
    // CATEGORIES DROP DOWN
    
    .navbar-collapse .navbar-categories ul.navbar-nav {
        margin-top:    0;
        margin-bottom: 0;
        > li {
            position: relative;
            > ul.dropdown-menu:not(.ignore-menu) {
                @include border-radius(0);
                @media (min-width: $grid-float-breakpoint) {
                    width:   225px !important;
                    padding: 5px 0 !important;
                }
                > li {
                    padding: 0;
                    > a {
                        padding:       10px ($grid-gutter-width / 2) !important;
                        border-bottom: none;
                        margin-bottom: 0;
                        font-weight:   300;
                        @media (max-width: ($grid-float-breakpoint - 1)) {
                            padding:       10px $grid-gutter-width !important;
                            font-weight:   normal;
                            height:        auto !important;
                            border-bottom: none !important;
                        }
                        &:hover {
                            background-color: #EEEEEE !important;
                        }
                    }
                }
            }
        }
    }
    
    // CONTACT PAGE
    
    .intro-text {
        font-size:  18px;
        text-align: center;
        margin:     60px 0;
    }
    
    #contact-map {
        height:     400px;
        background: #EEEEEE;
        margin:     30px 0;
    }
    
    #contactus {
        padding: 30px 0;
        * {
            @include placeholder(#999999);
        }
        .form-control {
            border:     none;
            background: #EEEEEE;
            padding:    15px;
            @extend .input-lg;
        }
        textarea.form-control {
            height: 200px !important;
        }
    }
    
    #about {
        .text {
            background: #FFFFFF;
            padding:    30px;
            h3 {
                padding-bottom: 0;
                &:after {
                    display: none;
                }
            }
            p {
                text-align: center;
            }
            @media (min-width: $screen-md-min) {
                position: absolute;
                z-index:  1;
            }
            @media (max-width: $screen-sm-max) {
                height: auto !important;
            }
        }
    }
    
    // HOME TEASERS
    
    .home-teaser-row {
        margin-top: floor($grid-gutter-width / 2 * -1);
        padding:    floor($grid-gutter-width / 2);
    }
    
    .home-teaser {
        position:        absolute;
        height:          calc(100% - 30px);
        width:           calc(100% - 30px);
        display:         block;
        left:            floor($grid-gutter-width / 2);
        top:             floor($grid-gutter-width / 2);
        background:      transparent 50% 50% no-repeat;
        background-size: cover;
        img {
            display: none;
        }
    }
    
    #music-toggle {
        position:  absolute;
        bottom:    60px;
        left:      60px;
        z-index:   1800;
        color:     #FFFFFF;
        width:     50px;
        height:    50px;
        font-size: 50px;
    }
    
    .product-info-details {
        .input-number {
            .input-lg {
                height: 46px;
            }
        }
        .iconbar {
            color:     #999999;
            font-size: 20px;
        }
    }
    
     
  4. ReneT
    ReneT Erfahrener Benutzer
    Registriert seit:
    1. Dezember 2016
    Beiträge:
    708
    Danke erhalten:
    232
    Danke vergeben:
    67
    Auf die eigentlich Frage habe ich keine Antwort... Aber grundsätzlich wird an den Core Dateien keine Änderung vorgenommen, da diese bei nächsten Update überschrieben werden.

    Entweder über den Style Editor einfügen oder einen eigene CSS Datei erstellen mit den Änderungen...
     
  5. Anonymous
    Anonymous G-WARD 2015/2016
    Registriert seit:
    20. Februar 2012
    Beiträge:
    9.094
    Danke erhalten:
    1.616
    Danke vergeben:
    1.214
    versuche doch mal diesen Code im SE unter "eigenes css hinzufügen":

    Code:
    .navbar-categories > ul > li {
        position: static;
    }
    
    .navbar-categories > ul > li > ul.dropdown-menu {
        width: 100% !important;
    }
    Caches löschen und schauen ob es gefällt. So wurde mir hier mal geholfen.