zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sticky Header -> Zentrieren (Wordpress / Avada Theme 3.4.3)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 06.06.2014, 10:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Unglücklich

Zitat:
Zitat von Thielo Beitrag anzeigen
Arbeite mit Kindselektoren Elternelement > Kindelement Dann betrifft eine Regel auch nur die Elemente erster Ebene.
Ich habe jetzt die Selektoren eingesetzt und ein wenig rumprobiert.

HTML-Code:
nav#sticky-nav > ul {
    text-align: center!important;}

nav#sticky-nav > li {
    display: inline!important;
    float: none!important;
}

nav#sticky-nav li > a  {
    display: inline!important;
    float: none!important;
}
Doch es funktioniert so nicht. Ich weiß einfach nicht weiter.
Hat noch jmd einen Tipp für mich?
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 06.06.2014, 10:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Entweder behälst du meine Variante und überschreibst die Listenpunkt des Dropdown-Menüs wieder, indem du z.B. ul ul li oder so verwendest um damit nur die zweite Liste anzusprechen.

Was die andere Variante betrifft:

Mit dem > Selektor sprichst du die direkten Kindelemente an, also nur die Elemente die sich genau EINE Ebene darunter befinden. Um also nur die li's der ersten Liste anzusprechen würdest du "nav > ul > li" verwenden.

Damit sprichst du die ul an, die sich DIREKT eine Ebene unter nav befindet und nur die Listenpunkte, die sich darin in der ersten Ebene befinden.

Verständlich?
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 06.06.2014, 12:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Antwort.

Ich verstehe eigentlich was du meinst, demnach sieht mein Code jetzt so aus:

HTML-Code:
nav#sticky-nav  {
    float: none!important;}

nav#sticky-nav > ul {
    text-align: center!important;}

nav#sticky-nav > ul > li {
    display: inline!important;
    float: none!important;
}

nav#sticky-nav > ul > li > a  {
    display: inline!important;
    float: none!important;
}
Nur er bei:
HTML-Code:
nav#sticky-nav > ul {
    text-align: center!important;}
trotzdem das Submenü zentriert.
Auch den Abstand durch:
HTML-Code:
display: inline!important;
bekomme ich nicht weg.
Was mache ich falsch?
Mit Zitat antworten
  #14 (permalink)  
Alt 06.06.2014, 13:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Ich werde jetzt deine erste Lösung nutzen mit der zusätzlichen Klasse für das Dropdown Menü.

Ich würde trotzdem noch gerne Wissen wo mein Fehler im vorherigen Post lag.

Vielen Dank
Mit Zitat antworten
  #15 (permalink)  
Alt 06.06.2014, 13:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

text-align ist eine Eigenschaft, die weiter vererbt wird. Deshalb musst du beim Dropdown den Text wieder linksbündig setzen.

Ich weiß nicht welchen Abstand zu mit display: inline meinst.. Ich denke mal wenn du den Wert für "top" bei #wrapper #sticky-nav .fusion-megamenu-wrapper auf 32px oder so setzt, sollte es passen
Mit Zitat antworten
  #16 (permalink)  
Alt 06.06.2014, 13:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank! Das hat jetzt endlich funktioniert!
Eine Frage bleibt mir noch. Die orange Linie beim mouse over ist nun noch versetz. Diesen Abstand meinte ich in Bezug auf diplay: inline. Wenn ich display-inline deaktiviere, erscheint sie wieder da wo sie hinsoll. Wie lege ich jetzt ihre Position fest?
Mit Zitat antworten
  #17 (permalink)  
Alt 06.06.2014, 13:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Oh man, ich hab jetzt zwar das fusion megamenü auf die Position bekommen.. kann dafür aber die Links dort drauf nicht anwählen da das Menü zusammen klappt bevor ich nen Punkt anwählen kann.
Mit Zitat antworten
  #18 (permalink)  
Alt 06.06.2014, 17:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Code:
}
nav#sticky-nav ul ul li {
    float: left !important; 
}
Hier Float entnehmen

Code:
body #header-sticky.sticky-header #sticky-nav ul ul {
    top: 65px !important; 
}
Hier ändern auf 32px

Ändere auch dieses:
Code:
}
#nav ul li, #sticky-nav ul li {
    float: left;
    margin: 0;
    padding: 0 35px 0 0;
}
Neue Regel.. erstellen
Code:
}
#nav ul li, #sticky-nav ul li {
    float: left;
    margin: 0;
}
#nav ul li {
    padding: 0 35px 0 0;
}
#sticky-nav ul li {
    padding: 0 35px 13px 0;
}
Teste mal

_____________
MfG Roland
Mit Zitat antworten
  #19 (permalink)  
Alt 10.06.2014, 08:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Reden Danke!!

Hallo,

vielen vielen Dank für eure großartige Hilfe! Der Header ist nun genau so zentriert wie ich ihn haben wollte!

Das Problem dass ich das Menü nicht erreichen konnte, habe ich mit
HTML-Code:
nav#sticky-nav > ul > li > a  {
    display: inline-block!important;
löse können.

Hier der jetztige Code:

HTML-Code:
nav#sticky-nav  {
    float: none!important;}

nav#sticky-nav > ul {
    text-align: center!important;}

nav#sticky-nav > ul > li {
    display: inline!important;
    float: none!important;
}

nav#sticky-nav > ul > li > a  {
    display: inline-block!important;
    float: none!important;
}

nav#sticky-nav ul ul {
    text-align: left!important;}
	


#wrapper #sticky-nav .fusion-megamenu-wrapper{
   top: 32px!important;}

}

body #header-sticky.sticky-header #sticky-nav ul ul {
    top: 32px !important; 
}

#header-sticky.sticky-header .main-nav-search-form {
    top: 32px!important;
   }

#nav ul a, #sticky-nav ul a, .navigation li.current-menu-ancestor a {
    border-top: none!important;}

Habt ihr eine Idee warum sich beim Mouseover über die Suchmaske das Menü um ein paar Pixel nach unten verschiebt?

Gruß!
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 10.06.2014, 08:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.06.2014
Beiträge: 21
dstarship befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Habt ihr eine Idee warum sich beim Mouseover über die Suchmaske das Menü um ein paar Pixel nach unten verschiebt?
Auch gelößt:

HTML-Code:
.header-v5 #nav ul #main-nav-search-link, #sticky-nav-search-link.search-link {
border-top: 3px solid rgba(0, 0, 0, 0)!important;}
Danach musste ich noch die Menüabstände um 2 Pixel anpassen.

Danke!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
header, sticky header, wordpress, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Header fixieren im Wordpress Theme? Killaoptik CSS 0 01.05.2012 19:48
divs für wordpress theme zeitgeisth CSS 34 23.02.2009 15:36
Header "Rahmen" kleiner machen, wie? prokik CSS 1 16.08.2007 23:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:31 Uhr.