CSS小技巧 如何讓Sticky Header向下滾動時有陰影效果
Kadence WP主題的Sticky Header,有Sticky Bottom Border的選項,可選擇不同效果的Boder,但是沒Box Shadow的效果。
不過,可以在CSS加入一些語法。
Sample
.kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) > .site-header-row-container-inner, .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.item-hidden-above) {
box-shadow: 0 0 20px 5px #777;
}
如果只想讓Home page的Sticky Header有陰影效果,可加入相關的Class #masthead。
Sample
.home #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) > .site-header-row-container-inner, .home #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.item-hidden-above) {
box-shadow: 0 0 20px 5px #777;
}