# Header verschoben bei mobiler Ansicht

**URL:** <https://forum.shopware.com/t/header-verschoben-bei-mobiler-ansicht/37637>\
**Category:** Themes & Design\
**Created:** [22. Juni 2016 um 14:46 UTC](https://forum.shopware.com/t/header-verschoben-bei-mobiler-ansicht/37637 "2016-06-22T14:46:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![zgrug](https://avatars.discourse-cdn.com/v4/letter/z/439d5e/32.png) [@zgrug](https://forum.shopware.com/u/zgrug)\
**Post date:** [22. Juni 2016 um 14:46 UTC](https://forum.shopware.com/t/header-verschoben-bei-mobiler-ansicht/37637/1 "2016-06-22T14:46:02Z")

</div>

Hallo,

&nbsp;

ich verzweifel derzeit leider ein wenig.&nbsp;  
Bin dabei den Header ein wenig anzupassen, auf nem Bildschirm passt alles, sobald ich mir dann die mobile Ansicht anschaue, weiß ich nicht mehr weiter…&nbsp;

&nbsp;

Das ganze sieht dann so aus:&nbsp;

Habe schon debugged und geschaut ob ich die Ausrichtung nach rechts bekomme, doch… die ist bereits rechts…

&nbsp;

Als Grundlage diente das Flat Responsive Design, welche ich nun angepasst habe.

header.less (Die letzten 3 Einträge kann man zudem auch sicherlich schöner verarbeiten?)

```
/*merkzettel ausblenden
li.navigation--entry.entry--notepad,
nav.product--actions a.action--link.link--notepad {display:none;}
*/
.header-main {
    background-color: #e0e0e0;
}

.results--list {
    .box-shadow(none);
}

@media screen and (min-width: @phoneLandscapeViewportWidth) {
  .results--list{
    .border-radius(0);
  }
}
.header-main
.icon--text2 {
  .unitize(font-size, 25);
  vertical-align: middle;
}
.header-main {
  // Logo
  .logo-main {
    // Smaller logo for mobile viewports
    .logo--shop {
      .unitize-height(35, 16);
      width: 50%;
    }

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

.header-main {
    .logo-main {
      width: 30%;

      .logo--shop {
        .unitize-height(90, 16);
        .unitize-width(300);
        img {
          width: 100%;
          height: auto;
        }
      }
      .logo--link {
        .unitize-height(90, 16);
        .unitize-width(300);
      }
    }

    .shop--navigation{
      width: 70%;
    }
  }

.navigation--list
.entry--account
.account--link {
  background-color: #e0e0e0;
}

.navigation--list
.entry--card
.cart--link {
  background-color: #e0e0e0;
}
.shop--navigation
.navigation--entry
.btn {
  background-color: #e0e0e0;
}

```

&nbsp;

Plugin „Erweitertes Menü“ wird noch verwendet, da habe ich aber lediglich die Farben angepasst.

Danke für die Hilfe.

MfG

EDIT: Es liegt definitv an der header.less. Hab die vom responsive Design probiert und da sieht es normal aus.