Divs ohne Zugriff auf HTML neu anordnen

Question

Ich habe ein Wordpress-Theme angepasst und bin auf einen frustrierenden Blocker gestoßen.

Ich möchte die Kopfzeile (header.non-sticky-nav) nach dem Vollbild-Cover (.Fullscreen-Cover) und vor dem Inhalt (.content) positionieren.

<header class="non-sticky-nav"> 
    <div id="navbar"></div> 
</header> 
<div id="wrapper"> 
    <div id="content"> 
     <div class="fullscreen-cover"></div> 
     <div class="content"></div> 
    </div> 
</div> 

current-result_vs_desired-result

habe ich versucht, durch die Verwendung eines der Navigationsleiste Neupositionierung „top: XPX“ Wert aber das bedeutet natürlich nicht funktionieren, da die .fullscreen-Abdeckung keine feste Höhe. Hier

ist die Testseite I zur Ausgabe bin mit: http://samburrough.design/test/

Die Themenseite spezifischer oder globalen CSS-Code-Injektionen ermöglicht, und als Thema regelmäßig aktualisiert wird, würde ich gerne mal ausprobieren und halte diese Funktion zu verwenden anstatt sich in die Theme-Dateien zu vertiefen und die Änderungen jedes Mal zu überschreiben, wenn ich sie aktualisieren möchte.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Können Sie kein untergeordnetes Thema erstellen und das DOM auf diese Weise ändern? Auf diese Weise werden die Änderungen nicht jedes Mal überschrieben, wenn ein Update zum übergeordneten Thema veröffentlicht wird?

Dies wäre (sollte) eigentlich die bevorzugte Option sein.

Smashing Magazine; Create and Customise Wordpress Child Theme

Answer 2

Sie könnten versuchen mit order mit flexbox. Zum Beispiel:

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.one, 
 
.two { 
 
    width: 100%; 
 
} 
 

 
.one { 
 
    order: 2; 
 
    background: red; 
 
} 
 

 

 
.two { 
 
    order: 1; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="one"> 
 
    1 
 
    </div> 
 
    <div class="two"> 
 
    2 
 
    </div> 
 
</div>

vielleicht ein bisschen problematisch sein, je nachdem, was Ihr Markup aussieht. Und funktioniert nicht mit älteren Browsern.

Answer 3

Wenn das Thema keine Blockpositionierung enthält, müssen Sie das DOM leider bearbeiten. Während Sie wahrscheinlich eine wackelige absolute Positionierung auf der Bar und dem Helden verwenden könnten, wird die Positionierung dieser absolut wahrscheinlich Ihnen eine Kaskade von Problemen verursachen - beginnend mit dem ansprechenden Nav.

Answer 4

Es gibt eine JavaScript-Funktion/Methode, mit der Knoten Orte im Dom tauschen können. Node.replaceChild()

Das folgende Beispiel stammt aus der Dokumentation und erstellt ein neues Element, aber Sie können auch einen vorhandenen Knoten auswählen.

// create an empty element node 
// without an ID, any attributes, or any content 
var sp1 = document.createElement("span"); 

// give it an id attribute called 'newSpan' 
sp1.id = "newSpan"; 

// create some content for the new element. 
var sp1_content = document.createTextNode("new replacement span element."); 

// apply that content to the new element 
sp1.appendChild(sp1_content); 

// build a reference to the existing node to be replaced 
var sp2 = document.getElementById("childSpan"); 
var parentDiv = sp2.parentNode; 

// replace existing node sp2 with the new span element sp1 
parentDiv.replaceChild(sp1, sp2);