• Skip to content
  • Skip to secondary navigation
  • My Account

Envy

  • Envy Demo
  • Envy Pro Demo
  • Tutorials
  • Forums
  • Contact

Reposition Envy Header Above Slider

January 3, 2015 by Jon Barratt

A unique design feature in ENVY is that the site header is positioned below the slider. However, some developers may prefer the header to appear above the slider. This change is very easy.

In your ENVY (v1.2+) theme’s /lib/js/main.js file, simply replace all code for the function envyFunc() with the following:

function envyFunc() {

var scrollYpos = $( document ).scrollTop();

    // Set displacements in flow
    $( ".site-container" ).css( 'padding-top', topnavHeight + headerHeight );
    $( ".site-header" ).css( 'top', topnavHeight );

    // Make header narrow on scroll
    if ( windowWidth > 960 && scrollYpos > sliderHeight ) {
        $( ".site-header .wrap" ).addClass( 'narrow' );
    } else {
        $( ".site-header .wrap" ).removeClass( 'narrow' );
    }

}

If using WP Clips, be sure to record the change in your custom Clip’s log.txt file.

And that’s it!

Filed Under: News, Newsletter, Tutorial

Reader Interactions

Comments

  1. doug says

    February 9, 2015 at 7:15 pm

    Jon, I changed out the copy but it’s still placing my slider on top of the Header. I’m trying to get my page to look closer to the envy pro full page slider.

    here’s my page. http://www.allwoodcompany.com

    Doug

    Reply
  2. Jon Barratt says

    February 10, 2015 at 2:02 am

    Hi Doug

    Your issue is further complicated by the fact that you’re on an earlier version of ENVY. The instructions above are for 1.2+ (a major update on 1.1+ which makes for a simpler change).

    As mentioned in the forums, customising the original Envy front page to look like the Envy Pro full-page slider is a fairly intensive process and not recommended if you don’t have sound programming knowledge in jQuery, PHP and CSS.

    Doug, please contact me if you’d like me to quote on the customisation.

    Best always
    Jon

    Reply
  3. doug says

    February 11, 2015 at 2:12 pm

    Jon, how do I get the updated envy? I purchased both Envy and the Envy Pro (recently)

    D

    Reply
  4. Danielle says

    June 16, 2015 at 4:51 am

    Hi, I have Envy 1.2.2. After replacing this section of code the header still does not appear above the slider. Are there any other changes I need to make?

    Reply
    • Jon Barratt says

      June 16, 2015 at 11:18 pm

      Hi Danielle

      This solution is tried and tested. Perhaps, try clearing your cache (most likely problem if using a caching plugin). Alternatively, it may be a customisation or plugin conflict. I’d really need to inspect your code to diagnose the issue.

      Best always
      Jon

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Krolyn Studios Jon Barratt WordPress Genesis WooCommerce PayPal

© Copyright 2014 Krolyn Studios · All Rights Reserved · Privacy Policy