How to make both the logo and the nav bar fixed ("sticky") in the header on both mobile and desktop

[christopher]

That is not possible. The hamburger menu is triggered by the width of the browser and it does not depend on the actual device.

The white space you see is because of this part of the code:

@media (max-width: 979px)
.masthead {
    min-height: 129px;
}

Please change the value of 129px to find the best value. I think 100px can be a good value.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[jeremy4]

Ok thank you @christopher.amirian
I only asked in the same thread because it appeared as though the white space happens at the breakpoint at which desktop menu changes to sandwich. The 129px seems to work insofar as not showing the white space as long as one doesn’t adjusting the width of the browser nor zoom in until sandwich appears. Many thanks for your help!

[nabeel]

Hi again,

Can you please try replacing your JS code present in your Global JS section with the following code:

function header_adjustment() {
	jQuery('header.masthead').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar-inner').height() + jQuery('.x-logobar').height());
}
jQuery(document).ready(function(){
	jQuery('.x-logobar').prependTo( jQuery('.x-navbar') );
	jQuery('.x-topbar').prependTo( jQuery('.x-navbar') );
	header_adjustment();
});
jQuery(window).resize(function(){
	header_adjustment();
});

Then please remove the following CSS as well:

@media (max-width: 979px)
.masthead {
    min-height: 129px;
}
}

Don’t forget to clear your browser’s cache after making the code changes. Let us know how this goes!

[jeremy4]

@Nabeel

function header_adjustment() {
jQuery(‘header.masthead’).css(‘height’, jQuery(’.x-topbar’).height() + jQuery(’.x-navbar-inner’).height() + jQuery(’.x-logobar’).height());
}
jQuery(document).ready(function(){
jQuery(’.x-logobar’).prependTo( jQuery(’.x-navbar’) );
jQuery(’.x-topbar’).prependTo( jQuery(’.x-navbar’) );
header_adjustment();
});
jQuery(window).resize(function(){
header_adjustment();
});

@Nabeel thank you, but now on mobile devices I’m getting the white space . It disappears as soon as scrolling happens, but every time any of the pages load it appears again.

[paul.r]

Hi,

I checked in mobile and it seems to be working fine on my end.

Please clear your mobile browser cache and check again.

Thanks

[jeremy4]

@paul.r The white space appears as each of the pages are loading, but snaps away as soon as scrolling commences. I also went ahead and deleted from the Global CSS:

@media(min-width:979px) {
.masthead {
min-height:98px;
}
}

@media (max-width:480px){
.masthead {
min-height:155px; /Adjust this value to larger min-height. Large min-height will increase size of masthead underneath header/navbar. 480px can be adjusted too./
}
}

Should I have done that? What should my Global CSS look like?

[Alaa]

Hi,

This is how exactly your website loads on mobile devices:

I couldn’t notice the white space you referenced in your latest reply. As it’s really getting hard to continue discussing this situation here on that thread, kindly please open a new thread for further inquiries.

Thanks.