Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 19, 2021 at 10:33 pm #1329748
    jaimemerz

    We’re trying to customize the header for our Enfold site. On the homepage, we want to use a transparent header with the logo below the navigation, and have it scroll to a shrunken header. On interior pages, we’ll want the same appearance as the shrunken header.

    The problem we’re encountering is that Enfold limits transparent header settings when the logo is placed below the menu. Right now we have the header set to display the logo above and menu below, but need to figure out how to achieve the look we’re going for in these mockups. Do you have any suggestions on how we can achieve this?

    Transparent homepage header:
    Transparent homepage header

    Shrunken/interior page header:
    Shrunken/interior page header

    November 20, 2021 at 1:37 pm #1329779
    Mike

    Hey jaimemerz,
    For your homepage I would recommend using an image element to show your giant 1/2 page logo in the center of the screen and then hide it on scroll.
    What are your plans for tablets and mobile?
    Try setting up your logo below the menu like you would have it and adding the “logo” image in the center of the screen, and include an admin login so we can assist with hiding on scroll, your staging site doesn’t have any interior pages linked in the menu, please add.

    Best regards,
    Mike

    November 23, 2021 at 12:09 am #1330056
    jaimemerz

    Hi Mike,
    Thanks for that suggestion! I went ahead and updated the header layout placed the logo where we’d want it. We’ll probably be simplifying the design for tablet/mobile and omit the overlay. I also created and linked an interior page for “About” and included admin credentials in the private content.

    November 23, 2021 at 12:04 pm #1330097
    Guenni007

    One thing is to use the header: logo – center, menu – below
    and then change position in dom via child-theme functions.php:

    function change_position() { 
?>
<script>
(function($){
	$('#header_main_alternate').insertBefore($('.av-logo-container'));
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_position');

    next will be to calculate the shrink amount – i test that in the meanwhile.

    November 23, 2021 at 12:57 pm #1330102
    Mike

    Hi,
    Thank you for the login, since you said your plan is to omit the overlay for smaller screens my test found that the layout you have begins to show well for 1024px so I used that as the breakpoint, so this script checks for a minimum width of 1023px and a scroll of 20px from the top on the home page only. The css below hides the element on smaller screens.
    I added this code to the end of your functions.php file in Appearance ▸ Editor:

    function custom_home_overlay() { ?>
    <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll > 20 && width >= 1023) {
    $('#top.home #overlay').css({ 'display': 'none'});
	  }
	  if (scroll < 20 && width >= 1023) {
    $('#top.home #overlay').css({ 'display': 'block'});
	  }
  });
 })(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_home_overlay');

    and this to your Quick CSS

    @media only screen and (max-width: 1023px) { 
	#top.home #overlay {
		display: none;
	}
}

    please clear your browser cache and check.


    @Guenni007     thank you for your idea, I didn’t try it because we were already down this path 🙂

    Best regards,
    Mike

    November 23, 2021 at 1:12 pm #1330116
    Guenni007

    OK my test site on this is: https://basis.webers-testseite.de/garrod/
    i just changed position – and use a child-theme edited avia-snippet-sticky-header.js on this
    ( then i stop now to style the responsive case )

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.