Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1329748

    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


    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,


    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.


    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() { 
    add_action('wp_footer', 'change_position');

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


    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() { ?>
    (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'});
    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.

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

    Best regards,


    OK my test site on this is:
    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 )

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