How to make the mobile header transparent in landing-4.html template

Hello,

1. Making the Header Transparent on Mobile Devices is Definitely Possible. You can consider using the following CSS Code:

@media (max-width: 991px) {
	#header.dark.transparent-header { background-color: transparent; }

	#header.transparent-header + #slider {
		top: -100px;
		margin-bottom: -100px;
	}
}

However, this will only make the Header Transparent and but not make it work accordingly when you Open the Menus after clicking the Trigger.

1. This is Definitely Possible too! Consider using the Responsive Classes. You can add a Custom Class example .custom-slider-bg to the #slider Container and then control the Background using the CSS:

.device-lg .custom-slider-bg { background-image: url('images/your-image-lg.jpg'); }

.device-md .custom-slider-bg { background-image: url('images/your-image-md.jpg'); }

.device-sm .custom-slider-bg { background-image: url('images/your-image-sm.jpg'); }

.device-xs .custom-slider-bg { background-image: url('images/your-image-xs.jpg'); }

.device-xxs .custom-slider-bg { background-image: url('images/your-image-xxs.jpg'); }

This will definitely work fine. Let us know if we can help you with anything else or if you find any issues.

Hello,

Please make sure that you add your Custom CSS Codes in the css/custom.css File and link this CSS File in your header as described in the Documentation > Start > Customization Section.

Hope this Helps! This will definitely work fine.

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We Really apologize for the Inconveniences caused. Can you please provide us with a Live URL with the CSS Codes added so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

We Really Apologize about the Delay! Here are the Solutions for your Issues:

1. Consider adding the following CSS Code to fix the issue with the Slider Content moving up:

.device-xs #slider,
.device-xxs #slider { padding-top: 100px; }

1. Add the following CSS Code to fix the Issue with Transparent Header on Mobile Devices when opening the Menu:

@media (max-width: 991px) {
	#header { min-height: 100px; }

	#header-wrap {
		position: absolute;
		width: 100%;
		min-height: 100px !important;
	}

	body.primary-menu-open #header-wrap { background-color: rgba(0,0,0,0.85); }

	body.primary-menu-open .dark #primary-menu:not(.not-dark) ul li { border-top-color: rgba(255,255,255,0.2) !important; }
}

This is the Best Possible Solution currently available.

1. The Background Images CSS Codes that you have added in the css/custom.css File is perfectly fine but they are not changing on Different Devices because the .custom-slider-bg Class has not been added to the #slider Tag. As soon as you add this Class this issue will be automatically resolved.

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Hello,

1. We Apologize about this Issue. There appears to be a Minor Bug in the One Page Scrolling Function while handling the Primary Menu Expand/Collapse States. Please find the following code in the js/functions.js File inside the onePageScroll: function() Function Block:

if( windowWidth  0 ) {
		$('#primary-menu > ul.mobile-primary-menu, #primary-menu > div > ul.mobile-primary-menu').toggleClass('show', false);
	} else {
		$('#primary-menu > ul, #primary-menu > div > ul').toggleClass('show', false);
	}
	$pagemenu.toggleClass('pagemenu-active', false );
}

and replace it with:

if( windowWidth  0 ) {
		$('#primary-menu > ul.mobile-primary-menu, #primary-menu > div > ul.mobile-primary-menu').toggleClass('show', false);
	} else {
		$('#primary-menu > ul, #primary-menu > div > ul').toggleClass('show', false);
	}
	$pagemenu.toggleClass('pagemenu-active', false );
	$body.toggleClass("primary-menu-open", false);
}

This will definitely fix this issue.

1. Regarding the Background Image, please find the following code:

and replace it with:

This should definitely fix your issue. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Since you are using the Same Image for all the Resolutions, it would not be possible to shrink the Image Dimensions on Mobile Devices since the Slider area adjusts according to the Content inside it and the Image then adjusts accordingly. This is why you will need to use different Images for different devices to optimize the Overall Look.

Hope this Helps!

Thanks for your Patience. Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

To fix this issue, you will need to remove the Inline Styling Background Image from the #slider Element. So your Code will look like this:

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Hello,

We have just checked this out for you and the issue is that since the css/custom.css File is inside the css/ Folder. You will need to add a Proper File Location for the Images. So the background-image: url('images/landing/landing1a1.jpg'); will be background-image: url('../images/landing/landing1a1.jpg'); since the images/ Folder is outside the css/ Folder and in the Main Directory.

This should definitely fix your issue. Let us know if we can help you with anything else or if you find any further issues.

Hello,

We Really apologize about the Inconveniences! Can you please provide us with a Live URL with the css/custom-3.css CSS Linking so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Thank You so much for your Continued Patience and Apologize about the Inconveniences! Please remove the following code from the #slider Element:

style="background: center center no-repeat; background-size: cover;"

and then simply add the following code in the css/custom.css File:

.custom-slider-bg {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.device-lg .custom-slider-bg { background-image: url('../images/landing/landing1a1.jpg'); }

.device-md .custom-slider-bg { background-image: url('../images/landing/landing1a2.jpg'); }

.device-sm .custom-slider-bg { background-image: url('../images/landing/landing1a3.jpg'); }

.device-xs .custom-slider-bg { background-image: url('../images/landing/landing1a4.jpg'); }

.device-xxs .custom-slider-bg { background-image: url('../images/landing/landing1a5.jpg'); }

This should now definitely fix the issue. Let us know if we can help you with anything else or if you find any further issues.