Transparent menu bar on home page

Hello,

my website is https://datasaveconsulting.com
I would like the menu bar on the home page to do the same as on your demo page. That it is transparent and that when you scroll down it turns color.

Thanks in advance. Regards.

Hello,

First thanks for using our theme!

Please try adding the given custom CSS code below at Appearance > Customize > Additional CSS:

@media(min-width: 1025px) {
	.home .top-bar {
		position: absolute;
		width: 100%;
		background-color: transparent;
		top: 0;
		z-index: 10;
	}
	.home .main-header {
		position: fixed;
		width: 100%;
		transition: ease all 300ms;
	}
	.home .main-header:not(.sticky-active) {
		position: absolute;
		top: 40px;
		width: 100%;
		background-color: transparent;
	}
	.home .slides-container .slide-item {
		background-attachment: scroll;
	}
	.home .header-slider {
		margin-top: -110px;
		height: calc( 100vh + 110px ) !important;
	}
	.home .top-bar a,
	.home .main-header:not(.sticky-active) ul li a {
		color: #FFF !important;
	}
	.home .top-bar svg,
	.home .main-header:not(.sticky-active) svg {
		fill: #FFF !important;
	}
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support