Menüzeile im Mobile Phone nicht sichtbar

Hallo,

ich baue gerade das Theme twenty fourteen um und habe es endlich geschafft, dass die obere primäre Menüzeile in der PC Ansicht fest stehen bleibt mit folgender CSS Änderung

.masthead-fixed .site-header {
/* position: fixed; */
top: -100px;
}

Leider ist nun die Menüzeile im mobile Phone nicht mehr sichtbar. Was kann ich tun???

Für schnelle Hilfe wäre ich sehr dankbar. :smile:

Viele Grüße
Manuela

 

ja, war es

Leider funktioniert es mit deinem Vorschlag noch nicht.

Hast du vielleicht noch einen andere Idee?

Viele Grüße

Manuela

 

ja, das ist richtig. Aber mit dieser Einstellung "wandert" die Menüzeile in der PC Ansicht. Dies wollte ich vermeiden.

Hast du vielleicht eine Idee wie beides funktioniert - feststehende primäre Menüzeile in der PC Ansicht + sichtbare funktionierende Menüzeile im mobile Phone?

Danke schon einmal

Manuela

 

Also:

Ich bin dabei das twenty fourteen Template nach meinen Vorstellungen umzuformatieren. Was ich nicht schaffe ist, die primäre Header Menüzeile in der PC Ansicht fest stehend zu bekommen und gleichzeitig diese Menüzeile im Handy sichtbar zu haben. Entweder sehe ich das Menü im Handy und dafür legt sich die Menüzeile in der PC Ansicht auf den Content Bereich beim scrollen - siehe hier die Screenshots -



oder ich habe eine feststehende Menüzeile im PC aber dafür fehlt das Menü im Handy.

Dies hier war der Standardeintrag in der CSS

/* Fixed Header */

.masthead-fixed .site-header {
position: fixed;
top: 0;
}

Mit dieser Standardeinstellung ist das Menü im Handy sichtbar, aber in der PC Ansicht legt es sich über den Contentbereich.

Mit folgender Änderung ist der Stand des Menüs im PC sichtbar und im Handy nicht.

.masthead-fixed .site-header {
/* position: fixed; */
top: 0;
}


Jetzt wo ich das alles noch einmal aufschreibe und mir nebenbei meine CSS Datei anschaue ist mir aufgefallen, dass es nicht an diesen CSS Einstellungen liegt sondern an an meiner Einstellung im Site Header
Dadurch ist das Menü im Handy nach oben weggerutscht

.site-header {
background: url("images/Primärnavigationsleiste.png");
max-width: 1260px;
margin-top: -80px; <--------------------------------------- hier der Übeltäter!
position: absolute;
width: 100%;
z-index: 4;
}

Mal schauen, ob ich das irgentwie sauber hinbekomme, das beide Ansichten passen

Vielen Dank
Manuela

 

super!!!!!

Sieht jetzt gut aus


vielen vielen Dank für den Tip mit dem Media Querie!!!!!!


Manuela