Thanks @Guenni007, for your time to help others and let them learn too. I really appreciate all your lengthy and in depth answers.

I created a code wiki and added my first snippet.

Hi Mike, thanks for that! I altered the code somewhat to have it fade away on scroll. I changed:

$("#avia-messagebox-").hide();

to

$("#avia-messagebox-").stop().fadeTo('fast', 0);

Full script:

// Hide messagebox on scroll
function custom_messagebox_script() {
        ?>
        <script>
        (function ($) { 
          $(window).scroll(function() {    
              var scroll = $(window).scrollTop();
              if (scroll >= 20) {
                  $("#avia-messagebox-").stop().fadeTo('fast', 0);
              } else {
                  $("#avia-messagebox-").stop().fadeTo('slow', 1);
              }
          });
        })(jQuery);
        </script>
            <?php
        }
        add_action('wp_footer', 'custom_messagebox_script');

Regards, Daniel

• This reply was modified 4 years ago by Daniel.

Hi @mike,

No, the content scrolls under the header, but over the logo and widgets in the header area. If you scroll down, you will see that the header remains visible and the main content scrolls under the header. The header_main that contains the main menu, stays on top. The other elements in the header section, such as logo, search and custom-html widgets, go behind the main content when scrolling.

Regards, Daniel

Hi Victoria,

Best regards, Daniel

Hi @ismael,

Thanks, that thread is talking about another slider plugin SmartSlider.

I am not sure which I did first, but that shouldn’t matter right? I have given you access to the site, credentials are in the private section. Hope you can help!

Cheers, Daniel

Hi @mike,

Thanks again, I think we are getting closer to the desired end result, which is great! :)

I made some small changes to your code to improve the visual experience. I also got approval from the designer to remove the fixed header on mobile. This gives me two – I hope final – questions:

1) I have changed the function so the elements have an absolute position in a mobile view, see below:

function custom_script(){
        ?>
        <script>
      (function($){
        $(document).ready(function(){
                var width = $(window).width()
                if ((width >= 989)) {
      $( '#wrap_all' ).each(function() {
      $( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
      $("span.logo").css({ 'position': 'fixed','z-index': '0' });
      
      $( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
      $("div#search-2").css({ 'position': 'fixed','z-index': '0' });
      
      $( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
      $("div#custom_html-3").css({ 'position': 'fixed','z-index': '0' });
      });
      } else {
      $( '#wrap_all' ).each(function() {
      $( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
      $("span.logo").css({ 'position': 'absolute','z-index': '501' });
      
      $( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
      $("div#search-2").css({ 'position': 'absolute','z-index': '501' });
      
      $( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
      $("div#custom_html-3").css({ 'position': 'absolute','z-index': '501' });
      });	
      }
      });
      })(jQuery);
      </script>
      <?php
      }
      add_action('wp_footer', 'custom_script');

When I make my browser width smaller, the elements remain fixed in a mobile view: https://daan.me/up/Screenshot%202020-05-11%20at%2011.31.56.png Is there away to avoid this?

2) When I open the mobile menu, the items are visible in the menu: https://daan.me/up/Screenshot%202020-05-11%20at%2011.42.05.png They should not be visible when the menu is opened. Can we do this?

Thanks again for your help!

Regards, Daniel

Hi @mike,

Thanks, I’ll await your updated function!

Regards, Daniel

Hey Yigit,

That was my first solution, to let them fade out when scrolling down. Unfortunately the designer is demanding these two elements to remain visible all the time, but to go under the elements in the #main section. Would there be another solution, maybe not to use the logo and header widget but something alternatively?

Thanks for helping! Kind regards,
Daniel

Hi @jordan_s,

You may close, thanks again for your help! 👍

Regards, Daniel

Hey Jordan,

Thanks, it works but I am looking for the same effect as with the logo. The two different effects next to each other don’t match now.

Thanks!
Daniel

• This reply was modified 4 years, 9 months ago by Daniel.

Hi @ismael,

Yeah, that’s it, thanks! Last question then: where’s the Read More button? I’ve set up the blog posts to show Excerpt With Read More Link.

Thanks, Daniel

Hi Ismael, of course! Details below.

Regards, Daniel