Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 3, 2018 at 1:04 am #1017272
    ashlandwebsites

    Hi

    I have used Enfold for many sites as it is the best theme I’ve worked with – so thank you!!!

    I know that the full-width banner style header is sort very 2010 but some clients still want it so it would be great if it was a built in option (feature request).

    But in the mean time I have to finish this site. I got the header to display nicely but the scroll with the sticky menu is very awkward.

    I want the top of the logo to disappear first as normal and for the logo to stay until the top of the menu reaches the top of the page. My CSS is below. Please, what would be a more elegant solution?

    /*MAKES THE LOGO FULL WIDTH*/

.container.av-logo-container {
    padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}
.logo, .logo img  {
    width: 100%;
    max-height: 215px !important;
}

/*MAKES LOGO DISAPPEAR WHEN SCROLLED*/
.header-scrolled .container.av-logo-container {
	display: none;
	height: 0 !important;
	
}

    Thanks very much
    David

    October 3, 2018 at 7:39 am #1017379
    Nikko

    Hey ashlandwebsites,

    Can you try to replace this code:

    .header-scrolled .container.av-logo-container {
	display: none;
	height: 0 !important;
}

    to:

    .header-scrolled-full .container.av-logo-container {
    display: none;
    height: 0 !important;
}

    Hope this helps.

    Best regards,
    Nikko

    October 4, 2018 at 4:21 am #1017660
    ashlandwebsites

    Thank you Niko!

    That is better but still awkward. The menu scrolls up the header halfway, then gets stuck as you keep scrolling, then jumps the rest of the way to the top instantly.

    Is there anyway to make the scroll smooth and consistent?

    Thanks very much
    David

    October 4, 2018 at 7:28 am #1017727
    Nikko

    Hi David,

    I have added this js code on your site:

    function addjustHeaderHeight(){
?>
<script>
 jQuery.noConflict();
 (function($) { 
    var header = $("#header"),
	    logoContainer = header.find(".container.av-logo-container"),
        logoContainerHeight = logoContainer.height(),
        logoInnerContainer = logoContainer.find(".logo > a"),
        headerNewHeight = 0;

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

        if( logoContainerHeight >= scrollTop) {
            headerNewHeight = logoContainerHeight - scrollTop;
            logoContainer.css({
                "height" : headerNewHeight + "px",
                "max-height" : headerNewHeight + "px",
                "line-height" : headerNewHeight + "px"
            });

            logoInnerContainer.css({
                "height" : headerNewHeight + "px",
                "max-height" : headerNewHeight + "px"
            });
        }

	});
})(jQuery);
</script>
<?php
}

add_action('wp_footer', 'addjustHeaderHeight');

    Let us know if you need further assistance.

    Best regards,
    Nikko

    October 4, 2018 at 10:03 pm #1018017
    ashlandwebsites

    That’s brilliant! I don’t know java script and would never have found anything nearly as elegant! Thank you!

    October 4, 2018 at 11:03 pm #1018030
    Jordan Shannon

    Hi,

    I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Full Width Logo Banner Sticky Menu Scroll’ is closed to new replies.