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

**URL:** <https://forum.shopware.com/t/nach-geanderter-logogrosse-schiebt-sich-das-logo-in-die-top-navigation/50728>\
**Category:** Themes & Design\
**Created:** [28. Januar 2018 um 10:49 UTC](https://forum.shopware.com/t/nach-geanderter-logogrosse-schiebt-sich-das-logo-in-die-top-navigation/50728 "2018-01-28T10:49:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![PeterBaumeister](https://avatars.discourse-cdn.com/v4/letter/p/f04885/32.png) [@PeterBaumeister](https://forum.shopware.com/u/PeterBaumeister)\
**Post date:** [28. Januar 2018 um 10:49 UTC](https://forum.shopware.com/t/nach-geanderter-logogrosse-schiebt-sich-das-logo-in-die-top-navigation/50728/1 "2018-01-28T10:49:35Z")

</div>

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](http://www.schwimmbeckenonline.de)

&nbsp;

Danke für die Hilfe 🙂 gruss Peter

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [28. Januar 2018 um 11:01 UTC](https://forum.shopware.com/t/nach-geanderter-logogrosse-schiebt-sich-das-logo-in-die-top-navigation/50728/2 "2018-01-28T11:01:46Z")

</div>

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

```
margin-top: -35px;

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![PeterBaumeister](https://avatars.discourse-cdn.com/v4/letter/p/f04885/32.png) [@PeterBaumeister](https://forum.shopware.com/u/PeterBaumeister)\
**Post date:** [28. Januar 2018 um 11:41 UTC](https://forum.shopware.com/t/nach-geanderter-logogrosse-schiebt-sich-das-logo-in-die-top-navigation/50728/3 "2018-01-28T11:41:19Z")

</div>

wo muss ich das einbinden?

header.less schaut so aus:

.header-main {

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

---

<div class="post-metadata">

**Author:** ![PeterBaumeister](https://avatars.discourse-cdn.com/v4/letter/p/f04885/32.png) [@PeterBaumeister](https://forum.shopware.com/u/PeterBaumeister)\
**Post date:** [28. Januar 2018 um 12:24 UTC](https://forum.shopware.com/t/nach-geanderter-logogrosse-schiebt-sich-das-logo-in-die-top-navigation/50728/4 "2018-01-28T12:24:19Z")

</div>

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

&nbsp;

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

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

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

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

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

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

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

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

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

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

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

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