Hi! I have issue with header, which is not showing up when I’m scrolling my webpage. I know this is important feature for users and I can’t do it by myself, so maybe someone could help me with this?
https://lumitica.com
Topic summary
Issue: The site’s header does not stay visible (“sticky” header) when scrolling on mobile. The store owner wants the header to appear during scroll on phones.
Suggested fix: A responder advised editing the theme’s JavaScript to adjust the sticky breakpoint, recommending changing a width value to 320px in header-script.js (or similar .js). An image was shared to illustrate the code location.
Findings: The posted code shows stickyHeader applies only when $(window).width() > 991, and explicitly removes the sticky class below that width. This indicates sticky is disabled on mobile by design. The store owner said changing the value did not have any effect.
Current status: No confirmed fix. The helper asked the owner to confirm it’s a mobile-only issue (it is) and suggested ensuring edits are being made in the active theme.
Open items / next steps: Verify you’re editing the live theme’s JS, and adjust the conditional that disables sticky below 991 (e.g., lower the breakpoint or revise the else block). Discussion remains unresolved.
I believe you saying, sticky not working in mobile right? It seems like you have some JS to add and remove that sticky effect, first try to find that code and change the following value to 320 (you don’t want sticky on really really small screen device):
- Try finding the following code in the header-script.js file, if not any file with .js
- Change value to 320
1 Like
I found it in header-script.js, but when I change this value to 320 nothing happens.
// STICKY MENU ==============================================================================================
stickyHeader = function() {
var target = $(‘#page_header’);
var pseudo = $(‘#pseudo_sticky_block’);
var stick_class = ‘megamenu_stuck’;
$(window).on(‘load scroll resize’, function() {
if ( $(window).width() > 991 ) {
var scrolledValue = parseInt( $(window).scrollTop() );
var offsetValue = parseInt( pseudo.offset().top );
var headHeight = target.outerHeight();
if ( scrolledValue > offsetValue ) {
target.addClass( stick_class );
pseudo.css({ ‘height’ : headHeight });
}
else {
target.removeClass( stick_class );
pseudo.css({ ‘height’ : 0 });
};
}
else {
target.removeClass( stick_class );
pseudo.css({ ‘height’ : 0 });
};
});
$(window).on(‘load’, function() {
setTimeout(
function(){ $(window).trigger(‘scroll’) }
, 180 );
});
};
stickyHeader();
megamenuToggle();
are you sure, firstly can you answer you are talking about mobile view right?
Yeah. Right now when you are scrolling page on any mobile device it doesn’t show up.
IDK, that’s the only code I can figure out, make sure you are working on the current theme.