For further info:

The overlaying Menu is created after the first opening event so setting an event listener directly leeds to some errors. Also i was able to incorporate the focusin event when leaving the menu

      /**
       * Barrierfree Menu Close with ESC Key
       * - enhance Enfold menu keyboard usabillity
       * @see https://kriesi.at/support/topic/menu-focus-trap-accessibility-keyboard-usage-improvement
       */
      var enfold_menu_close_by_key = function(){
        var options = {
              key_code: 27, // ESC
              classNames:{
                active: 'is-active',
                container_active: 'av-burger-overlay-active',
                container_active_delayed: 'av-burger-overlay-active-delayed',
              },
              selectors: {
                trigger: '.av-hamburger',
                container: 'html',
                overlay: '.av-burger-overlay',
              }
            },
            trigger = document.querySelector(options.selectors.trigger),
            container = document.querySelector(options.selectors.container),
            overlay = null,
            has_overlay = function(){
              if ( !( overlay instanceof HTMLElement ) ) {
                overlay = document.querySelector(options.selectors.overlay);
              }
              return overlay instanceof HTMLElement ? true : false;
            },
            menu_close = function(){
              var classNames = options.classNames;
              
              if ( trigger.classList.contains(classNames.active) ) {
                trigger.classList.remove(classNames.active);
                
                container.classList.remove(classNames.container_active);
                container.classList.remove(classNames.container_active_delayed);
                
                overlay.style.display = 'none';
                overlay.style.opacity = 0;
              }
            };
        
        if ( trigger instanceof HTMLElement ) { // if a menu trigger is used
          document.addEventListener('focusin', function(event){
            if ( has_overlay() && !event.composedPath().includes(overlay) ) {
              // close the menu if any
              menu_close();
            }
          });
        
          document.addEventListener('keydown', function(event){
            if ( has_overlay() && event.keyCode === options.key_code ) {
              // close the menu
              menu_close();
            }
          });
        }
      };

  enfold_menu_close_by_key();

• This reply was modified 1 year, 6 months ago by tom.
• This reply was modified 1 year, 6 months ago by tom.

Hi Thank you for your response.

i implemented it that way:

      /**
       * Barrierfree Menu Close with ESC Key
       * - enhance Enfold menu keyboard usabillity
       * @see https://kriesi.at/support/topic/menu-focus-trap-accessibility-keyboard-usage-improvement
       */
      enfold_menu_close_by_key = function(){
        var options = {
              key_code: 27, // ESC
              classNames:{
                active: 'is-active',
                container_active: 'av-burger-overlay-active',
                container_active_delayed: 'av-burger-overlay-active-delayed',
              },
              selectors: {
                trigger: '.av-hamburger',
                container: 'html',
                overlay: '.av-burger-overlay',
              }
            },
            trigger = document.querySelector(options.selectors.trigger),
            container,
            overlay,
            menu_close = function(){
              var classNames = options.classNames;
              
              if ( trigger.classList.contains(classNames.active) ) {
                trigger.classList.remove(classNames.active);
                
                container.classList.remove(classNames.container_active);
                container.classList.remove(classNames.container_active_delayed);
                
                overlay.style.display = 'none';
                overlay.style.opacity = 0;
              }
            };
        
        if ( trigger instanceof HTMLElement ) { // if an overlay is used
          document.addEventListener('keydown', function(event){
            if ( event.keyCode === options.key_code ) {
              // get elements only once
              if ( typeof container === 'undefined' ) {
                container = document.querySelector(options.selectors.container);
              }
              if ( typeof overlay === 'undefined' ) {
                overlay = document.querySelector(options.selectors.overlay);
              }
              // close the menu
              menu_close();
            }
          });
        }
      },

  enfold_menu_close_by_key();
      

While it works fine i seem to need some text-hint near the close button.
Anyway i hoped you will consider it for an update, so i will work on my own solution.

• This reply was modified 1 year, 6 months ago by tom.

I can’t find what is indicated. In the additional CSS section I only marked this: .logo img, .logo svg {
top: 10px;
max-width: 100%;
height: 50px;
.logo img: url(“https://test.mettilapsoriasifuorigioco.it/”)
}

header {
max-width: 100%;
height: 150px;
padding: 10px;
filter: blur(0px);
-webkit-filter: blur(0px);
}

@media only screen and (max-width: 767px) {
full-width-img {
margin: auto;
width: 90%;
}
}

@media screen and (max-width: 1024) {
full-width-img {
margin: auto;
width: 90%;
}
}

I attach photos https://prnt.sc/kndy4beZQXcZ / https://prnt.sc/kCxPrFNksDj0

Mariarita

Good morning,

thanks for the reply.
I managed to make the menu appear at the top of the photograph in the menu, but when I scroll, it disappears, only the photo of the testimonial appears, and then the menu reappears.
I would like to avoid it disappearing from me and then reappearing. I would like it to be always visible and that all the content on the home page, when I scroll, disappears behind the header bar.
I am attaching some photos to help you understand better, I am also attaching photos of the settings.

Header at the top of the photo: OK – https://prnt.sc/6KM52YjOLl6y
Header disappears when I start scrolling the page: NOT GOOD – https://prnt.sc/N1qPne-w-4Bs
Header reappears when I scroll again, okay – https://prnt.sc/qz9MmibxIFuI
Header settings – https://prnt.sc/hb0ts_z2Gc8a / https://prnt.sc/jQUPRNV8YEiJ

Thank you, Mariarita

Hi Mike,

If I could attach a screenshot of my homepage with the big white space where the slider should appear to this message I would, but I can’t how.

Instead, you’re welcome to go into my WordPress account and add a Full-width Easy Slider to the top of my homepage, then look at the preview (without updating the page). Do that and you’ll see what I’m talking about.

Best regards,
Jocelyn

Hi Mike, I’m suprised that you say that nothing is wrong in the page https://fysiobreda.thedigitalmanager.nl/behandelingen/dry-needling/, as this is how the menu is looking:

Whats wrong is:
– there is a white space above the full width dia slider, the menu is not ‘on top of the full width slider/ content’

What I try to achieve is:
– the menu is on top of the content / full width slider, as is the case on for example https://fysiobreda.thedigitalmanager.nl/

Could you set that up for page, so I can use that as a template for other pages?

• This reply was modified 1 year, 6 months ago by the_digital_manager.
• This reply was modified 1 year, 6 months ago by the_digital_manager.

But I do appear to need one more bit of help with CSS –

What can I do to add some padding as the element is now overlapping the top of some pages a bit – see one example below.

FYI this is desktop view only. I have this issue via mobile taken care of using:

@media only screen and (max-width: 430px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 282px !important;
}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
.responsive #top #wrap_all #main {
padding-top: 259px !important;
}
}

@media only screen and (max-width: 690px) and (orientation: landscape){
.responsive #top #wrap_all #main {
padding-top: 282px !important;
}
}

• This reply was modified 1 year, 6 months ago by biggsuccess.
• This reply was modified 1 year, 6 months ago by biggsuccess.

Hi Rikard! I found a solution from Mike:

1) I was hoping there may be some CSS for mobile view of the banner – to look as it does on desktop and not collapse into a box with stacked text. If that isn’t possible that’s fine too.

2) Could you please assist me with a CSS suggestion for top margin/padding for the LayerSlider

I appreciate your help

• This reply was modified 1 year, 6 months ago by biggsuccess.

Thanks Mike – I edited in a couple other issues:

1) Is there anything I can do to make the banner look a little nicer on mobile view?

2) And what I can do to prevent the top of the slider element below the menu on mobile view from not being cut off

Mike that is amazing! Now if I want to add a little more padding between the bottom of the banner and the top of the menu what css should I use?

Also – anything I can do to make that a little nicer on mobile view?

And what I can do to prevent the top of the slider element below the menu on mobile view from not being cut off

• This reply was modified 1 year, 6 months ago by biggsuccess.
• This reply was modified 1 year, 6 months ago by biggsuccess.

That worded but it only got the middle wording. It didn’t get the top “Prepended static text” or the bottom “Special Header H3”. see attached