Menü bei Producer Responsive

Das Menü wird immer rechts vom Logo dargestellt, auch wenn es drunter rutscht. Sie müssten die Struktur so aufbauen, dass alles in eine Zeile neben dem Logo passt, bzw. ggf. die Schriftgröße der Menü-Einträge entsprechend verkleinern.

Die Seite "Startseite" könnten Sie z.B. ohne weiteres aus der Navigation ausblenden, die erreicht man ja z.B. auch über einen Klick auf das Logo bzw. über das sogenannte Extramenü…

Es gibt da natürlich Möglichkeiten. Aber in deinem Fall würde ich das leichter lösen.

Die Breite der Website erhöhen. Standard ist Full HD mit 1920Px breite. Somit kannst du getrost auf über 1400PX gehen, und die Tablett-Nutzer wissen durchaus mit einem Hamburger-Butten umzugehen.

Sorry Stefan S

Die Startseite würde ich lassen , gehört einfach immer.. und in das kürzere "Home" umbenennen. Auch die Kontaktdaten sollten immer Präsent sein, diese könnte man auch per "Position Absolute" im Header unterbringen. Aber ich glaube das passt auch so, und ist damit auch einfacher und ohne Fehler umzusetzen.

Mario das klingt für Windows-User, die Ihre Fenster immer auf voller Breite haben logisch. Auf meinem Mac hat der Bildschirm 2560px Breite, ich habe aber nie ein Browser-Fenster in dieser Breite offen und würde daher in diesem Fall immer das umbrochene Menü sehen… Es gibt halt meist verschiedene Use-Cases.

Stefan S das Stimmt natürlich auch wieder.

jenders 4 DJ , ich stand damals vor dem gleichen Problem und habe das so gelöst. zella.de

Folgendermaßen bin ich vor gegangen.

Einstellungen CSS:

/****************************** LOGO ******************************/
.llogo {
position: absolute;
top:20px;
margin-left:-275px;
left:50%;
width:550px;
height: 87px;
z-index:6100;
}
@media (max-width: 979px) {
.llogo {
width:400px;
height:63px;
margin-left:-200px;
top:32px;
}}
@media (max-width: 650px) {
.llogo {
width:300px;
height:49px;
margin-left:-150px;
top:50px;
}}

/****************************** Navi Rechts ******************************/
.navbar ul.nav{
margin-right: 0 !important;
}

Widget Quelltext:

<!-- LOGO -->
<div class="llogo"> 
<a href="https://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="https://www.zella.de/bilder/logo676x107.png" alt="Logo"></a></div>

Um Platz für das Logo zu schaffen hatte ich damals ein transparentes PNG als LOGO eingefügt. Heute würde ich dazu eher etwas CSS einsetzen.