Menü Position verschieben

soxes

Hallo,

Ich habe ein zusätzliches Menü in der Header.php eingefügt mit folgendem Code:

<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'container_class' => 'header-menu-class' ) );
?>

Momentan ist das Menü mitten im Hauptmenü siehe Link zur Seite: http://www.vitaldrulix.at/
Ich möchte das Menü gerne oben rechts under Suche positionieren und nicht nebeneinander sondern untereinander angliedern, ich habe es mit CSS versucht bekomme es aber nicht so recht hin, würde mich über Support sehr freuen.

Herzlichen Gruß

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

dann solltest du das Menü unter den Div mit der class site-top-bar setzen.

Ansonsten mal kurz auf die schnelle folgendes probiert:
.header-menu-class {
margin-top: -195px;
float: right;
}

soxes

Hallo Maxe,

Vielen Dank für die Unterstützung. Hat alles soweit gut geklappt, wie bekomme ich die ganze Geschichte noch responsive hin?

Herzlichen Gruß

SirEctor

Zitat von maxe

dann solltest du das Menü unter den Div mit der class site-top-bar setzen.

Hast du es so gemacht? Dann sollte es kaum Probleme geben.

soxes

Hallo,

Danke für den Support!

Ich habe in meinem Style.css folgendes gemacht:

div.site-top-bar {
width:100%;
border-style:solid;
text-decoration:none;
top:auto;
}

SirEctor

Dann solltest du mal den Maintenance-Mode abschalten. Wie sollen wir uns sonst das Problem anschauen?

soxes

Hallo,

Danke für deine Antwort.

Ist abgeschalten!

soxes

Kann mich zu diesem Fall jemand unterstützen?

Ich möchte die Seite auch ungern ewig offen lassen, da sie noch in Bearbeitung ist.

Danke bereits im Voraus!

chezzone

[size=10][FONT=Consolas]Um es responsive zu bekommen nutze doch einfach die vorhandenen Media Queries deines Themes!

Media screen and (max-width: 640px)
Media screen and (max-width: 780px)
[/FONT][FONT=Consolas]
Das sehe dann z.B. so aus:

[/FONT][FONT=Consolas] Media [/FONT][FONT=Consolas]screen and (max-width: 640px){
[/FONT][size=10][COLOR=#3E3E3E]div.site-top-bar {[/COLOR]
[COLOR=#3E3E3E]width:100%;[/COLOR]
[COLOR=#3E3E3E]border-style:solid;[/COLOR]
[COLOR=#3E3E3E]text-decoration:none;[/COLOR]
[COLOR=#3E3E3E]top:auto;[/COLOR]
[COLOR=#3E3E3E]}[/COLOR][/SIZE][FONT=Consolas]
}[/FONT][/SIZE]
[FONT=Consolas]
[COLOR=#888888][COLOR=#222222]Die Werte für width, top etc. musst du dann natürlich ein bißchen mit rumspielen und anpassen!

Vielleicht hilft dir das ja weiter!
[/COLOR]

[/COLOR]
[/FONT]

soxes

Hallo,

Vielen Dank für deinen Support! Leider ändert sich nichts :-(

chezzone

[COLOR=#0A0A0A]nimm mal diese Klasse: [/COLOR][FONT=Consolas].header-menu-class statt der [/FONT][COLOR=#3E3E3E]div.site-top-bar[/COLOR][COLOR=#0A0A0A]

[/COLOR]

chezzone

[FONT=Consolas]Z.B. könnte man es so machen

Media screen and (max-width: 640px){
.header-menu-class {
margin-top: -275px;
[/FONT][FONT=Consolas]margin-right: -110px;
[/FONT][FONT=Consolas]position: relative;[/FONT][FONT=Consolas]
float: right;
z-index: 100000;
width: 70%;
}
}

Dann wären die Menüpunkte untereinander angeordnet oben rechts

EDIT// So, oder so ähnlich zumindest ;) musst mal mit den werten rumprobieren bis es für alle Smartphone / Tablet-Größen passt.[/FONT]

soxes

Danke!

Leider ist das menü in tablet größe bzw. smartphone nicht klickbar, woran könnte das liegen?

z-index:100000; wird verwendet

chezzone

Dass das Menü nicht anklickbar ist habe ich auch schon bemerkt, allerdings auch bei der normalen Desktop-Auflösung. Bin jetzt davon ausgegangen, dass die Menüpunkte noch nicht belegt sind. Sonst erhöhe mal den Z-Index, z.B. 300000

soxes

Die sind soweit belegt. Bei meiner Auflösung 2560x1440 im Fullscreen funktionieren Sie.

Wen ich es auf Tablet Größe verkleinere ist nur mehr Kassa klickbar.

Ich habe das Z-Index rauf und runter geschraubt, es ändert sich aber leider nichts - sorry für den schwierigen Fall....

:-)

chezzone

Ergänze mal folgendes

div.header-menu-class li {
padding: 15px;
display: block;
line-height: 1em;
position: relative;
top: -100px;
}

Werte natürlich auch beliebig anpassbar

soxes

genial danke...
Eine frage hätt ich noch, beim anklicken droppt das ganze menü nach unten - kann man hier irgendetwas tun?

chezzone

das kann ich jetzt nicht nachvollziehen...habs mal im Chrome V53 und InternetExplorer 11 getestet. Da droppt nix.
Welchen Browser verwendest du? Hast du den Cache geleert?

soxes

Ja ist bei alle meinen Browsern - klick mal von der Startseite auf eine andere im Hauptmenü - dann siehst du was ich meine.

Danke bereits im Voraus...

chezzone

Alles klar...jetzt habe ich es auch gecheckt. Hab natürlich nich die anderen Punkte in der Main-Navi angeklickt ;)

Ich würde mal vorschlagen, dass du das ganze nochmal etwas strukturierter aufbaust, und zwar jeweils als Destop Version und und dann jeweils für die media queries.
Das war doch jetzt alles sehr zusammen gestückelt!

Also mein Vorschlag sieht so aus:

Alles was du bisher drin hattest nochmal raus und dann Schritt für Schritt! Erst die Desktop Version, dann Smartphone (max 640px) und dann Tablet/etc. (max 780px).
Ich hab mal ein paar Elemente entfernt, die überflüssing waren und mal nen "text-align" hinzugefügt. Damit sollte es dann hinhauen (genaue Werte natürlich nochmal anpassen nach deinen Wünschen). Ich hoffe das dadurch auch der Effekte mit dem "runter droppen" verschwindet.

Code

[FONT=Consolas]
[FONT=Consolas][FONT=Consolas][FONT=Consolas].header-menu-class {    
margin-top: -275px;
[/FONT][FONT=Consolas]margin-right: -75px;[/FONT][FONT=Consolas]    
z-index: 300000; 
}


[FONT=Consolas][FONT=Consolas][FONT=Consolas][FONT=Consolas]div.header-menu-class li {    
padding: 15px;
display: block;
line-height: 1em;
position: relative;
[FONT=Consolas]text-align: right;[/FONT][/FONT][FONT=Consolas]
}[/FONT][/FONT][/FONT][/FONT][/FONT][/FONT][/FONT]
[/FONT]

Alles anzeigen

Code

[FONT=Consolas]
[FONT=Consolas]@media screen and (max-width: 640px){
.header-menu-class {    
margin-top: -195px;
[/FONT][FONT=Consolas]margin-right: -10px;
[/FONT][FONT=Consolas]z-index: 300000; 
}
}[/FONT]


@media screen and (max-width: 640px){
[FONT=Consolas][FONT=Consolas][FONT=Consolas]div.header-menu-class li[/FONT][/FONT][/FONT]{    
padding: 15px;
display: block;
line-height: 1em;
position: relative;
text-align: right;[/FONT][FONT=Consolas]
}
}
[/FONT]

Alles anzeigen

[FONT=Consolas]

Code

[FONT=Consolas]
[/FONT][FONT=Consolas][FONT=Consolas]@media screen and (max-width: 780px){
.header-menu-class {    
margin-top: -195px;
[/FONT][FONT=Consolas]margin-right: -15px;[/FONT][FONT=Consolas]   
z-index: 300000; 
}
}[/FONT][/FONT]


[FONT=Consolas]@media screen and (max-width: 780px){
[FONT=Consolas][FONT=Consolas][FONT=Consolas]div.header-menu-class li[/FONT][/FONT][/FONT] {    
padding: 15px;
display: block;
line-height: 1em;
position: relative;
[FONT=Consolas]text-align: right;[/FONT][/FONT][FONT=Consolas]
}
}
[/FONT]

Alles anzeigen

Viel erfolg!
[/FONT]

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menü Position verschieben

Jetzt mitmachen!