Sticky menu with changing header container

[HenkBarreveld]

Hello,

I am working on a theme that uses a header of which the height depends on the screen width. That means that the code in the file contain-to-grid.js does not work correctly after a window resize: var stickyMenu is calculated only once, on document load.

Calculating stickyMenu the same way on each resize does not work correctly when the topbar is fixed.

Therefore I propose changing contain-to-grid.js as below, provided that my assumption is correct that instead of the offset of .contain-to-grid I can also use the height of .header_container:

jQuery(window).on('load scroll resize orientationChange', function () { var stickyMenu = jQuery('.header_container').outerHeight(true); if (jQuery(window).scrollTop() > stickyMenu) { jQuery('body').addClass('f-topbar-fixed'); jQuery('.contain-to-grid').addClass('fixed'); } else { jQuery('body').removeClass('f-topbar-fixed'); jQuery('.contain-to-grid').removeClass('fixed'); } });

I am sorry for the bad layout; don't know how to change that.

[tsquez]

Hi Henk,

I will def look into this. The last change you proposed worked really well and I think will also. Give me a few days to see what I can see. I am almost done with the WP-Forge 6.3 update. Just trying to finish up the new off-canvas menu and I am almost done.

If this works I will make it part of the 6.3 update.

Thanks again for the input amigo, greatly appreciated.

[HenkBarreveld]

Thank you, Thomas,

I think it all depends on whether in WP-Forge there exists always a div.header_container (possibly empty) that is always positioned above the div.nav_container.

Thank you also for mentioning the new off-canvas menu. For this new child-theme I was just about to start with the styling of the off-canvas menu (version 6.2.4.2), but I am not in a big hurry so I will wait for the 6.3 release.

Best regards, Henk

[tsquez]

I just added this to the new update, seems to work fine. I tweaked the code you offered above but not by much. I just removed the body portion as it is not needed. I moved the fixed navigation to the new data-sticky so the class added to the body element is not needed.

And you can rest assured there will always be a .nav_container in the theme.

Thanks for the offering. I am going to close this out. All I have left to do is adjust a few of the color settings for the top-bar and the off-canvas menus and then the new 6.3 should be released.

Hopefully on Tuesday, latest is Wed. That's my next day off. Thanks again :wink: