Disable sticky main menu on desktop

[studio84digital]

Dear,

I’ve searched the forum and found this css code to disable the sticky menu on desktop when placing it in custom css for desktop:

body .whb-sticked .whb-general-header {
    display: none;
}

It works but when scrolling down a white gap is shown.
check the video: https://media.studio84.be/nOuQ9RQY

I noticed when I select the option “slide after scrolled down” in the sticky header settings the problem is solved on desktop. But I don’t like it to slide out all the time on mobile… I want the default setting “stick on scrol”.
screenshot: https://media.studio84.be/E0umoggl

Can you help me get rid of the white gap please?

• This topic was modified 2 years, 2 months ago by studio84digital.
• This topic was modified 2 years, 2 months ago by studio84digital.

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Kind Regards

Sure, see credentials below

Hello,

With your header configuration in order to remove the sticky header on the desktop the custom will look different.

@media (min-width: 1025px) {
	
	.whb-sticky-real.whb-sticked .whb-main-header {
		position: absolute;
	}

	.whb-sticky-real.whb-sticked .whb-not-sticky-row {
		display: block;
	}
	
	.whb-sticky-real.whb-sticked .whb-top-bar-inner {
		height: var(--wd-top-bar-h);
		max-height: var(--wd-top-bar-h);
	}	
	
	.whb-sticky-real.whb-sticked .whb-general-header-inner {	
		height: var(--wd-header-general-h);
		max-height: var(--wd-header-general-h);
	}
	
	.whb-header.whb-sticky-real.whb-sticked .whb-header-bottom-inner {
		height: var(--wd-header-bottom-h);
		max-height: var(--wd-header-bottom-h);
	
	}
}

Define the above code in Theme Settings -> Custom CSS -> Global Custom CSS area.

Kind Regards

Works like a charm, thanks for your help Luke!

Hello,

You are welcome! Always remember that you can reach out to us with any questions you may have.

Wish you all the best!

Kind Regards

[Author]

Posts