Home › Forums › WoodMart support forum › Disable sticky main menu on desktop

Disable sticky main menu on desktop

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 24, 2023 at 9:08 pm #506818

    studio84digital
    Participant

    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?

    October 25, 2023 at 10:33 am #506967

    Luke Nielsen
    Keymaster

    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

    October 25, 2023 at 11:12 am #507000

    studio84digital
    Participant

    Sure, see credentials below

    October 25, 2023 at 3:59 pm #507145

    Luke Nielsen
    Keymaster

    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

    October 25, 2023 at 4:18 pm #507155

    studio84digital
    Participant

    Works like a charm, thanks for your help Luke!

    October 25, 2023 at 5:24 pm #507176

    Luke Nielsen
    Keymaster

    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
Viewing 6 posts - 1 through 6 (of 6 total)