Fixed small header but main scrolls

Half way there with

#header_main {
    height: 100px !important;
    top: 30px;
}

#header_meta {
    position: fixed;
    width: 100%;
    top: 30px;
}

But still need some help changing the sticky position of the submenu.

Thanks

Thanks Mike

I’ve had a look and it’s partially solved the problem with this adjustment

// custom script
function add_custom_script(){
?>
<script>
(function($){
	function g() {
		var scrolled = $('.header-scrolled').length;
		if( scrolled == 1 ) {
			$('#sub_menu1').css('margin-top', '0px');
		} else {
			$('#sub_menu1').css('margin-top', '30px');
		}
	}

	$(window).scroll(function() {
		g();
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

However the pixels added to the margin remain even when the user scrolls back the other way.

Ideally I need to change the start position of the sticky when it hits the top of the browser.

Richard

Hi Mike

The grey navigation is not supposed to have the padding above it. The menu items should be sitting central in a box only 30px deep.

Richard

Hi Mike

Thanks for looking again and yes I’ve been messing with some custom JS to control the start point. Currently seeing if this will work

add_action( 'wp_footer', 'enfold_customization_custom_scripts' );
function enfold_customization_custom_scripts() {
?>
<script type = "text/javascript">
jQuery(document).ready(function(){
//
var menu = document.querySelector('#sub_menu1')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '40px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});
//
</script>
<?php
}

Unfortunately the CSS adjustments you suggested don’t work. Will keep trying.

Richard

Hi Mike

The initial appearance on scroll sticks to the top in the right place, but when you scroll back down you’ll see the white space appear. I’ve reverted to the code from earlier and added you changes.

Richard

Hi Mike

No that part is working OK, it’s the white space above the grey box that only appears after the initial scroll that’s annoying me.

Richard

Hiya. I’ve been adjusting code so it may look different now. The space is 40px. I found a CSS hack by adding margin-bottom:-40px to the div above the submenu and then adding margin-top:40px to the submenu. However as the element above is not fixed across the site it’s hard to replicate dynamically.

Richard

Thanks Victoria, would you happen to know how to fix.

Thanks
Richard

Hi Ismael

Thanks for the suggestion. In the end this script worked a treat, for any one else needing a solution

 <script>
(function($){
        var calc_scroll = function() {
            var header = $('#header').height(),
                scroll = $(window).scrollTop();
                if(scroll >= 450) {
                    $('#sub_menu1').css('padding-top', '30px');
                } else {
                    $('#sub_menu1').css('padding-top', '0px');
                }
        }

        $(window).scroll(function() {
            calc_scroll();
        });
})(jQuery);
</script>

Adjust your scroll height for where the navigation starts and padding for when it hits the top of the browser window

Richard