I did remove all old codes, and pasted the ones you suggested.

So now my style.css is:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }
  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }
  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }
  #header_main {
    border-bottom: none;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }  
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
  #top .header_bg {
    background-color: transparent !important;
  }
  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #edddc6 !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  /*** depends on your setting  ***/
  #top #header.av_header_transparency #header_meta .phone-info * {
    color: #FFF !important;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #edddc6;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
  .responsive #top #main {
    padding-top: 110px !important;
  }
  .responsive #top #main .sticky_placeholder {
    height: 0px !important;
  }
}

.responsive #top #wrap_all #header.hide-header,
#header.hide-header + #main #sub_menu1 {
  opacity: 0 !important;
  transition: opacity 1s ease;
}

.responsive #top #wrap_all #header:not(.hide-header),
#header:not(.hide-header) + #main #sub_menu1 {
  transition: opacity 0.5s ease;
}

And my functions.php is:

function close_sub_menu_on_click_items(){
?>
<script type="text/javascript">
(function($) {
  $('.av-subnav-menu .menu-item a').on('click', function() {
    $(this).closest('.av-subnav-menu').removeClass('av-open-submenu');
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'close_sub_menu_on_click_items');

That’s what is there. All cache is cleared, browser, wordpress, plugins.

Thanks Guenni,

Ik added the code.

Now:

Wide desktop: perfect.

Narrow desktop: hide/how working fine, no open space. However sub menu is not re-appearing.

Landscape mobile: hide/show working, no open space, However sub menu is not re-appearing.

Portret mobile: secondary menu break up is pushing down logo and scrolling bar. see: https://we.tl/t-5r5CxEoGtN

what should I finetune? Or what are the next steps?

is there a way to make to code css so that:

– the header with main menu and sub menu are showing when first opening the website,
– then upon scroll down, both main menu and sub menu disappear.
– upon scroll up, both main menu and sub menu reappear.

In short, make the whole header dis- and re-appear. (header always exists of main menu and sub menu)

All this with no extra space, hovering menus, or disappearing submenus.

I am curious and look forward to the answer.

I love this, tansparrant disappearing menu, however: it doesn’t seem to do anything on mobile.

Is there a way to make this standard on all screens, if so: what do i have to do to make that happen?

I remember why this space is there. But it might be another topic.

It is a color section that is “hiding on mobile/ on smaller screens”. It is only intended to be a header shown on bigger screens. For smaller screens there is a picture (in a fullwidth slider) that is working better than the setup with a header picture.

The hiding of the color section is leaving a blank space (header color)

Is there a way to get rid of this open space at all? Or just ignore it?

• This reply was modified 2 weeks, 6 days ago by Pietzaa.

Hi Guenni,

Thanks for getting back so quickly. I pasted the code, nothing is happening though.
I have tried different scripts now that i found on the interwebs, some work partially, some don’t.

How is it so hard to make the header reappear upon scroll-up? Shouldn’t there be just a toggle switch for this in the enfold child – header settings?

I can’t be the only one with this problem. All the solutions i find on youtube are based on elementor. Which i don’t have.

Some other solutions are depending on making a js folder in enfold child folder. Then making a .js file and inserting a script, then a code for functions.php and also one for style.php, did a couple of those and none seem to work or do anything at all.

Cheers,

I managed to fix the problem by playing with the numbers. I have changed height and max height to 140px in the #header part of the code. And also on the bottom of the code i changed 110px to 140px at the “responsive top main” part. On my phone it seems to be working well now. Everything including the scroll progression bar is wrapped in the header now.

`@media only screen and (max-width: 989px) {
.responsive #top #wrap_all #header .container {
width: 95%;
max-width: 95%;
}
#header {
position: fixed !important;
height: 140px !important;
max-height: 140px !important;
}
#top #header.av_header_transparency #header_meta {
background-color: transparent;
}
#header_main {
border-bottom: none;
}
.responsive #top .av-logo-container ,
.responsive #top .logo a,
.responsive #top .logo img,
.responsive #top .logo svg {
height: 80px !important;
max-height: 80px !important;
line-height: 80px !important;
}
.responsive #top .av-main-nav .menu-item-avia-special a {
height: 80px !important;
line-height: 80px !important;
}
.responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent !important;
}
#top .header_bg {
background-color: transparent !important;
}
#top #header:not(.av_header_transparency) .header_bg {
background-color: #edddc6 !important;
}
.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate,
.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
display: block !important;
}
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img,
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
opacity: 0;
}

/*** depends on your setting ***/
#top #header.av_header_transparency #header_meta .phone-info * {
color: #FFF !important;
}
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after {
background-color: #edddc6;
}
.html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before {
color: #FFF;
}
.responsive #top #main {
padding-top: 140px !important;
}
.responsive #top #main .sticky_placeholder {
height: 0px !important;
}
}

• This reply was modified 2 weeks, 6 days ago by Pietzaa. Reason: forgot to change the code and made it bold

Hi Ismael,

Thanks for the reply. I redid all the titles and then run the script, the script however doesn’t overwrite existing alt text, only media in which the alt text box was empty. So now i remove all the wrong alt text and then run the script again. Cheers!

Hi Ismael,

Thanks a lot for getting back at me so quickly. Really appreciate it.

I am going to view a couple of how-to video’s on styling and building pages, widgets, menus, etc with blogs on enfold. I should learn a lot more in the coming days. Whenever something is unclear in the future, I will get back.

A good how-to video on Enfold Child can be found here by the way: “https://www.youtube.com/watch?v=Gr4GV8NKMek&t=813s“.

Kind regards,
Pieter

• This reply was modified 1 month ago by Pietzaa. Reason: ealising I am an idiot and need more training
• This reply was modified 1 month ago by Pietzaa. Reason: Realized I am an idiot and need more training