We want the header in Talon Pro theme Like Sydney Pro theme

Hello

I want my website header to be transparent first and when you scroll down it changes to opacity 0.5 (Please Note: I need that is happening Just in the Home page) Like in Sydney Pro theme

Ayman
www.ebdee.com

Hello Ayman,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media (min-width: 1200px) {
    body.home #header-sticky-wrapper:not(.is-sticky) #header {
        background-color: transparent;
        transition: 0.5s;
    }

    body.home #header-sticky-wrapper {
        position: absolute;
        z-index: 1000;
        width: 100%;
    }

    body.home #header-sticky-wrapper.is-sticky #header {
        background-color: rgba(0, 0, 0, 0.5);
        transition: 0.5s;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi,

Well, this is not part of Talon’s design but you can use this code should get you started:


.home .site-header {
	background-color: transparent !important;
}
.home .sticky-wrapper {
	position: absolute;	
	z-index: 99;
	width: 100%;
}
.home .is-sticky .site-header {
	background-color: rgba(0,0,0,0.5) !important;
}

Thanks :slight_smile:

You are welcome Ayman!

Kind Regards, Roman.