Overlay on Header Image not appearing on mobile version

  • Hello

    I love this theme but need some help.

    On desktop my header image has a dark overlay/filter – which is great so that you can see the white logo and titles and button more clearly.

    However, it disappears when you launch the site on the mobile responsive version. You then can’t see any of the title text, logo and so on.

    How do I bring back this overlay/filter on the mobile version?

    I’m new to wordpress and not a coder by any means so please try to be really clear for me

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @dolcefarniente,

    Add the following custom CSS to Appearance -> Customize -> Additional CSS

    .hero-slider .home-slider-overlay {
    display: block;
   background: rgba(0,0,0,1);
}

    Let me know how it goes.

    Thread Starter dolcefarniente

    (@dolcefarniente)

    Hi

    Sorry I applied the code but it didn’t work. What should I do next? You can view with the code on a mobile device yourself via this link: https://thingstodocapeverde.com

    Thread Starter dolcefarniente

    (@dolcefarniente)

    Hi,

    The code didn’t work, what can I do instead?

    Having the same problem! Can you help at all @poonam9 ?

    zaszkowski

    (@zaszkowski)

    The main problem here is that the overlay is deactivated by default in CSS by:

    .hero-slider .home-slider-overlay {
	display: none;
}

    and for wider than 768px screens we have exception:

    @media screen and (min-width: 768px) {
	#home .hero-slider {
		position: fixed;
	}

	#home .hero-slider.slider-scroll-point {
		top: 0;
	}

	.hero-slider .home-slider-overlay {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.3;
		background: rgba(0,0,0,1);
	}
}

    I had the same issue and added this into Custom CSS and it seems to be working for mobile view:

    @media screen and (max-width: 767px) {
	#home .hero-slider {
		position: fixed;
	}

	#home .hero-slider.slider-scroll-point {
		top: 0;
	}

	.hero-slider .home-slider-overlay {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.3;
		background: rgba(0,0,0,1);
	}
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Overlay on Header Image not appearing on mobile version’ is closed to new replies.