Überlappung der Unterkategorien im Dropdownmenü

Anonymous · 5. Februar 2018

Hallo,

ich habe folgende 2 Probleme bei der Darstellung der Unterkategorie im Dropdownmenü und bei der verkleinerten Kategorie Menüleiste (siehe Bild).

1. Die kleinen Boxen der Unterkategorien überlappen sich leicht. Ich würde diese gern mit einem Abstand anzeigen lassen.

2. Wenn der Browser verkleinert wird, dann werden zu vielen Menüpunkte unter dem Link "weiter" angezeigt. Dort würde ich gern die Boxen der Menüpunkte farblich hinterlegen, sodass die sich von den Boxen der Unterkategorien abheben.

Um das Dropdownmenü so anzeigen zu lassen habe ich folgenden Code von BMS eingefügt:

Zitat von Anonymous: ↑

in die templates/Honeygrid/boxes/box_categories_top.html einfügen

HTML:

<!-- mod Kategoriebild -->
  <img src="{$child_item.data.image}" alt="{$child_item.data.name}"/>
  </br>
<!-- mod Kategoriebild -->

so wie hier

HTML:

                                                    {foreach name=ele_data item=child_item from=$categories_item.children}
                                                                                <li class="{if $child_item.children|@count > 0}dropdown {/if}level-2-child{if $content_data.category_id == $child_item.data.id} active{/if}">
                                                                                        <a href="{$child_item.data.url}" title="{$child_item.data.name}">
<!-- mod Kategoriebild -->
                                                                                                <img src="{$child_item.data.image}" alt="{$child_item.data.name}"/>
                                                                                                </br>
<!-- mod Kategoriebild -->
                                                                                                {$child_item.data.name}
                                                                                        </a>

und bei eigenes CSS im StyleEditor habe ich dann folgendes eingefügt:

Code:

.navbar-categories > ul {
  > li {
    @media (min-width: $screen-xs-min) {
      position:static !important;
      > ul.dropdown-menu {
        border-bottom:1px solid #00ff00;
        border-left:1px solid #00ff00;
        border-right:1px solid #00ff00;
        > li a {
          @media (min-width: $screen-lg-min){
          > img {       
            height: 60px;
            }
          }
          > img {
            height: 40px;
            }
          border:1px solid #ccc !important;
          border-radius: 5px;
          box-shadow: 0 5px 5px #888;
          &:hover,
          &:focus {
             box-shadow: 0 5px 5px #fff;
             transition: box-shadow .2s ease-in-out;
             border:1px solid #00ff00 !important;
          }
        }
      }
    }
    @media (max-width: $grid-float-breakpoint-max) {
      > ul.dropdown-menu {
        > li a {
          > img, br {
            display:none;
          }
        }
      }
    }
  }
}
@if ($gx-categories-mobile-icons == true) {
  .navbar-categories > .navbar-nav {
    li {
      text-align:center;
    }
  }
}
.navbar-collapse .navbar-categories ul.navbar-nav > li > ul.dropdown-menu {
    overflow-y: auto;
    max-height: $screen-xs-min;
}

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Vielen Dank im Voraus

Anonymous · 7. Februar 2018

Jemand eine Idee oder Ansatz wo ich anfangen kann?

Foren

Überlappung der Unterkategorien im Dropdownmenü

Überlappung der Unterkategorien im Dropdownmenü

Anhänge:

Screenshot_20180202-224051.jpg