Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 19, 2017 at 2:39 am #779736
    Briana

    Hello :)

    I recently asked to have my website’s shrinking header turn white before it shrunk and scrolled for a particular visual appearance. It looks great however now it causes the header on tablet to be sticky and shrink which I don’t want. Can I please have another bit of code to counteract this or adjust the original functions code provided? ( I don’t want any sticky or shrinking, just default).

    Code in use (child theme functions):

    add_action('wp_footer', 'ava_new_custom_script');
function ava_new_custom_script(){
?>
<script type="text/javascript">
(function($) {
    var lastScrollTop = 0;
    var target = $(".container.av-logo-container");

    $(window).on('scroll', function() {
        st = $(this).scrollTop();

        if(st < lastScrollTop) { 
            if (st <=  2) {
            	target.css("background-color", "rgba(255, 255, 255, 0.5)");
            }

        }
        else {
            target.css("background-color", "#fff");

        }
        lastScrollTop = st;
    });
})(jQuery);
</script>
<?php
}
    April 19, 2017 at 6:52 am #779801
    Nikko

    Hey Briana,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    
@media only screen and (max-width:1024px) {
  .html_header_top.html_header_sticky #header {
    position: absolute !important;
  }

  #top #header_main > .container {
    height: 185px !important;
    line-height: 185px !important;
    background-color: rgba(255,255,255,0.5) !important;
  }

  #top #header_main > .container .logo a, 
  #top #header_main > .container .logo img {
    max-height: 185px !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    April 20, 2017 at 12:12 am #780220
    Briana

    Almost! It does stay put which is perfect but it’s still turning white as it scrolls (which is what I want on desktop and was part of the original script). Any ideas on keeping the transparency on tablet when scrolling? If it’s going to be really tough to acheive I can leave it.

    Thanks! :)

    April 20, 2017 at 6:30 am #780319
    John Torvik

    Hi,

    Just try this custom CSS code:

    @media screen and (max-width: 769px) {
    .av-logo-container {
      background-color: transparent !important;
     }
}

    Best regards,
    John Torvik

    April 20, 2017 at 8:43 am #780374
    Briana

    Perfect! Thanks guys!

    You can close this thread :D

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Custom Enfold function causing sticky header on tablet’ is closed to new replies.