Fijar Menú con Divi Template Builder (Generador de temas)

He sacado la información de esta Web: https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/

En este video explica bien como hacerlo:

Además estos son los pasos básicos:

Step 1: Add the CSS ID and CSS Class to the SECTION of your Header Template Layout.

ID: main-header
Class: et-fixed-header

Step 2: Add the following CSS to your Divi Theme Options (or wherever you prefer to add custom CSS):

@media only screen and (min-width: 981px) {
#main-header.et-fixed-header {
position: fixed;
    padding-top:30px;
}
#page-container {
padding-top:135px;
}
}

Luego hay otra cosa que podemos hacer y es fijar una parte del menú y la otra no, por ejemplo si tenemos dos capas y solo queremos que se mantenga fija la del menú y el logo y queremos quitar la capa de las redes sociales:

Tutorial 2: How to Make Only Part of Your Divi Header Sticky

Y aquí los pasos a seguir:

Step 1: Add the following CSS to your Divi Theme Options custom CSS box (or to your custom Divi Child Theme style.css)

#divi-sticky-header {
	top: 0;
	width: 100%;
	z-index: 99 !important;
}

Step 2: Within the Divi Theme Builder, open the header you’d like to customize, and add the divi-sticky-header CSS ID to the custom CSS ID input field for the section/row you’d like to make sticky.

Step 3: Add a code module in the header template, and add the following code:

  <script>
// Adjust the number values below to match the height of the content above
window.onscroll = function() {scrollFunction()};
 
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("divi-sticky-header").style.position = "fixed";
  } else {
    document.getElementById("divi-sticky-header").style.position = "";
  }
}
</script>

Fijar Menú con Divi Template Builder (Generador de temas)

Categorías