Show sticky header bottom bar only on mobile

[gjvog]

I just purchased my second license for Woodmart and I am currently in the process of setting it up on a new website. I require assistance with the sticky header.

I have set-up a header for both desktop and mobile.
I would like the bottom row to be hidden on desktop only when stickied.
I’ve tried to do this with CSS multiple ways. I get the desired result in the Inspect Element window of my browser or even

Customize – Additional CSS

, but any time I put the CSS into

Theme Settings – Custom CSS

it stops working.

The CSS I used was:

@media (min-width: 1025px) {
	
		.whb-sticked .whb-header-bottom-inner {
		height: 40px;
		max-height: 40px;
		display:none
	}

I would prefer having all the CSS in the same place within

Theme Settings – Custom CSS

. What am I doing wrong?

• This topic was modified 1 year, 6 months ago by gjvog.

[Luke Nielsen]

Hello,

1. You can have some mistakes in other CSS code so it’s not working in the Custom CSS area.

2. We have the “Custom CSS for desktop” area that this media @media (min-width: 1025px) by default, so you can enter only selector and properties:

.whb-sticked .whb-header-bottom-inner {
	height: 40px;
	max-height: 40px;
	display: none;
}

Also, in your code I see a few mistakes: https://take.ms/Ycsje

Let me know the result.

Kind Regards

• This reply was modified 1 year, 6 months ago by Luke Nielsen.

[Author]

Posts