# Top-Bar und Main-Navigation im responsive Design anpassen

**URL:** <https://forum.shopware.com/t/top-bar-und-main-navigation-im-responsive-design-anpassen/27868>\
**Category:** Themes & Design\
**Created:** [3. Juni 2015 um 00:32 UTC](https://forum.shopware.com/t/top-bar-und-main-navigation-im-responsive-design-anpassen/27868 "2015-06-03T00:32:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gerlinde](https://avatars.discourse-cdn.com/v4/letter/g/ac8455/32.png) [@Gerlinde](https://forum.shopware.com/u/Gerlinde)\
**Post date:** [3. Juni 2015 um 00:32 UTC](https://forum.shopware.com/t/top-bar-und-main-navigation-im-responsive-design-anpassen/27868/1 "2015-06-03T00:32:03Z")

</div>

Hallo liebe Community, ich bin dabei, den Headbereich anzupassen. Ich möchte gerne, dass die Top-Bar und Main-Navigation dieselbe Breite haben, wie der Container dadrunter haben und nicht über die ganze Breite gehen. Ich dachte, es wäre schlau, sich da dann die Werte vom Container für max-width usw abzugucken und zu übertragen. Hatte eigentlich soweit auch gut geklappt. Aber nun habe ich festgestellt, dass es mit dem responsive Design irgendwo nicht stimmt dann. Verkleiner ich das Browserfesnter, verkleinert sich der Container schön wie es soll, aber Top-Bar und Main-Navigation nicht. Ich häng mal 2 Bildchen ran, um es zu verdeutlichen. Die Codes, die ich benutzt habe. Top-Bar: `.header-main .top-bar { margin-bottom: 1.125rem; margin-top: 1rem; padding: 1.2rem; position: relative; max-width: 78.75rem; display: block; width: 100%; margin-left: 20rem; }` Main-Navigation: `.navigation-main { position: relative; border: 0px none; max-width: 78.75rem; display: block; width: 100%; margin-left: 20rem; padding: 0.3rem; background: transparent none repeat scroll 0% 0%; margin-bottom: 1rem; }` Die Bildchen: [![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/b/b4891b6ad7d02b185aa1a2cd9de84e7dfe2978cb.jpeg)](http://www.directupload.net/file/d/4007/lj2l8uha%5C_jpg.htm) [![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/0/08c6a7467370b6b4d9e758806cb68d6d8016fde7.jpeg)](http://www.directupload.net/file/d/4007/middbdvj%5C_jpg.htm) Kann mir jemand sagen, wo da mein Fehler liegt? Danke. 🙂 LG Gerlinde

---

<div class="post-metadata">

**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\
**Post date:** [3. Juni 2015 um 02:57 UTC](https://forum.shopware.com/t/top-bar-und-main-navigation-im-responsive-design-anpassen/27868/2 "2015-06-03T02:57:19Z")

</div>

Du suchst wohl die richtige Div Klasse… könnte div class=“block” sein. Topbar Plugin :thumbup: [http://store.shopware.com/devpr68930095712/topbar.html](http://store.shopware.com/devpr68930095712/topbar.html)

---

<div class="post-metadata">

**Author:** ![Gerlinde](https://avatars.discourse-cdn.com/v4/letter/g/ac8455/32.png) [@Gerlinde](https://forum.shopware.com/u/Gerlinde)\
**Post date:** [3. Juni 2015 um 12:24 UTC](https://forum.shopware.com/t/top-bar-und-main-navigation-im-responsive-design-anpassen/27868/3 "2015-06-03T12:24:10Z")

</div>

Hallo, ich denke schon, dass ich die richtige Div Klasse habe. Ich arbeite immer mit den Entwicklertools in Firefox, um die richtige Stelle auch zu bearbeiten. Oder muss ich da an anderer Stelle noch Änderungen vornehmen? LG Gerlinde
