nach geänderter Logogröße schiebt sich das Logo in die top-navigation

Shopware 5 Themes & Design
1

Hallo, ich hänge gerade ein bisschen fest, nachdem ich die Logogrösse geändert habe, wird es beim smartphone richtig angezeigt, aber in der Desktopanschicht schiebt sich das Logo unter die Navigation. Wie kann ich das ändern?

hier der Link: www.schwimmbeckenonline.de

 

Danke für die Hilfe :slight_smile: gruss Peter

2

Auf das IMG-Tag kannst du noch das hier anwenden im Viewport für Desktop. 

margin-top: -35px;

 

1 „Gefällt mir“
3

wo muss ich das einbinden?

header.less schaut so aus:

.header-main {

// Logo
  .logo-main {
   .logo–link {
   .unitize-height(80, 16); // Anpassen der Höhe, Angabe in px
   }
 
 
   // Smaller logo for mobile viewports
   .logo–shop {
   .unitize-height(45, 16); // Anpassen der Höhe, Angabe in px
   }
  }
 
 
  @media screen and (min-width: @tabletViewportWidth) { // View für Tablets und Desktops
  .header-main {
   .logo-main {
    .logo–link {
    .unitize-height(100, 16); // 50 auf eure Höhe anpassen
   }
    .logo–shop {
    .unitize-height(100, 16); // 50 auf eure Höhe anpassen
    }
   }   
// Search entry
        .entry–search {
            .unitize(font-size, 14);
            position: right;
            left: 3%;
            margin-right: 10%;
            background: #fff;
            padding: 0;
            border: 0 none;
            width: 40%;
 }
    }
 }
 }

4

Okay, nun hab ich die Header.less wie folgt verändert: (soweit passt es in Mobil-und desktopansicht nun)

 

.header-main {
 // Logo
 .logo-main {
  .unitize-padding(10, 10 ,0 ,0);
  .logo–link {
   .unitize-height(107, 16);
  }

  // Smaller logo for mobile viewports
  .logo–shop {
   .unitize-height(45, 16); // Anpassen der Höhe, Angabe in px
   //width: 30%;
  }
 }
}

.shop–navigation {
        //width: 50%;
        .unitize(padding-top, 30);
}

    // Phone Landscape styling for the global shop header
@media screen and (min-width: @phoneLandscapeViewportWidth) {
.header-main {
        .logo-main {
   .unitize-padding(10, 10, 0, 10);
            width: 35%;

   .logo–link { .unitize-height(50, 16); }

   // Larger logo for tablet & desktop viewports
   .logo–shop {
    .unitize-height(50, 16);
    width: 100%
   }
         }
        }
}

    // Tablet styling for the global shop header
@media screen and (min-width: @tabletViewportWidth) {
.header-main {
        .logo-main {
   .unitize-padding(10, 10, 0, 10);
            width: 35%;

   .logo–link { .unitize-height(107, 16); }

   // Larger logo for tablet & desktop viewports
   .logo–shop {
    .unitize-height(107, 16);
    width: 100%
   }
         }
        }
}

    // Tablet Landscape styling for the global shop header
@media screen and (min-width: @tabletLandscapeViewportWidth) {
.header-main {
        .logo-main { width: 40%; }
        .shop–navigation { width: 60%; }
    }
}

    // Desktop styling for the global shop header
@media screen and (min-width: @desktopViewportWidth) {

    .header-main {
        .top-bar { .unitize(margin-bottom, 2); }
        .logo–shop { width: 75% }
    }
}