Menu flotante circular en divi estilo ✅ theme orbital 👍#DiviConwordpress

items-1.css

✅ Agregue el  el siguiente CSS personalizado a la imagen de Blurb.

margin-bottom:0px;

✅ Luego agregue el siguiente CSS personalizado al elemento principal:

position:absolute !important;
bottom:20px;
left:20px;

✅ En el modo de vista de estructura alámbrica, abra la configuración de blurb (menu hamburguesa) 
 y agregue la siguiente clase CSS:

CSS Class: transform_target

✅ Las demas imagenes  compartirán las mismas clases CSS,  

CSS Class: has-transform toggle-transform-animation



⛑  Asegúrese de mantener la etiqueta de estilo envuelta alrededor del CSS y la etiqueta del script envuelta alrededor de JavaScript / jQuery.

✅  Hacer que el botón de menú sea pegajoso (o fijo)

⛑  Debido a que este menú es pequeño e intuitivo para dispositivos móviles, es posible que desee que el menú sea adhesivo para que permanezca fijo en la parte inferior izquierda del navegador.

position: fixed !important;
bottom: 20px;
left: 20px;

items-2.css

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

 

toggle.js

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>