CSS 小技巧

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;
}

Similar Posts