Fix layout shift when elastic-nav is loading (#1532)

reakaleek · web-flow · commit da63050654ae · 2025-07-07T13:55:48.000+02:00
* Fix layout shift when elastic-nav is loading

* Remove unnecessary height css attribute
diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css
@@ -177,9 +177,11 @@
 	}
 }
 
-#elastic-nav {
+#elastic-nav-wrapper {
 	min-height: var(--offset-top);
+}
 
+#elastic-nav {
 	@media screen and (min-width: 1200px) {
 		.oldNav {
 			& > div {
diff --git a/src/Elastic.Documentation.Site/Layout/_Header.cshtml b/src/Elastic.Documentation.Site/Layout/_Header.cshtml
@@ -1,8 +1,10 @@
 @inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>
 @if (Model.Features.PrimaryNavEnabled)
 {
-	<div id="elastic-nav" hx-disable="true"></div>
-	<script src="https://www.elastic.co/elastic-nav.js" async></script>
+	<div id="elastic-nav-wrapper">
+		<div id="elastic-nav" hx-disable="true"></div>
+		<script src="https://www.elastic.co/elastic-nav.js"></script>
+	</div>
  	@await RenderPartialAsync(_SecondaryNav.Create(Model))
 }
 else

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,10 @@`
`1`	`1`	`@inherits RazorSlice<Elastic.Documentation.Site.GlobalLayoutViewModel>`
`2`	`2`	`@if (Model.Features.PrimaryNavEnabled)`
`3`	`3`	`{`
`4`		`- <div id="elastic-nav" hx-disable="true"></div>`
`5`		`- <script src="https://www.elastic.co/elastic-nav.js" async></script>`
	`4`	`+ <div id="elastic-nav-wrapper">`
	`5`	`+ <div id="elastic-nav" hx-disable="true"></div>`
	`6`	`+ <script src="https://www.elastic.co/elastic-nav.js"></script>`
	`7`	`+ </div>`
`6`	`8`	`@await RenderPartialAsync(_SecondaryNav.Create(Model))`
`7`	`9`	`}`
`8`	`10`	`else`