Hiding the drop shadow behind the main navigation only on blog pages

Site URL: https://tomato-purple-zmyk.squarespace.com/

I'd like to hide the drop shadow that I have set behind my main navigation only on blog pages as those are the only pages on my site that will not have hero images. I've figured out the code to have a solid background appear only on those pages so that the main navigation is visible. Unfortunately, while the below code works to remove the drop shadow, it removes it from every page on the site. Any insight as to how to target it to the blog pages (main blog page with all posts as well as individual blog post pages) would be appreciated. 

site pw: HBSnew2021!

//BLOG ITEM REMOVE DROP SHADOW//
.blog-item .basic-blog-grid-item 
.header .header-dropshadow, .header .header-announcement-bar-wrapper .header-background-gradient, .header .header-announcement-bar-wrapper .header-background-solid, .header .header-announcement-bar-wrapper .header-blur-background {
  height: 0% !important; 
  }

1 hour ago, ann_nola said:

Site URL: https://tomato-purple-zmyk.squarespace.com/

I'd like to hide the drop shadow that I have set behind my main navigation only on blog pages as those are the only pages on my site that will not have hero images. I've figured out the code to have a solid background appear only on those pages so that the main navigation is visible. Unfortunately, while the below code works to remove the drop shadow, it removes it from every page on the site. Any insight as to how to target it to the blog pages (main blog page with all posts as well as individual blog post pages) would be appreciated. 

site pw: HBSnew2021!

//BLOG ITEM REMOVE DROP SHADOW//
.blog-item .basic-blog-grid-item 
.header .header-dropshadow, .header .header-announcement-bar-wrapper .header-background-gradient, .header .header-announcement-bar-wrapper .header-background-solid, .header .header-announcement-bar-wrapper .header-blur-background {
  height: 0% !important; 
  }

Hi, it may be because you missed a few brackets in your code. Try this instead and let me know how it goes 🙂 

.blog-item .basic-blog-grid-item {
  .header .header-dropshadow, .header .header-announcement-bar-wrapper .header-background-gradient, .header .header-announcement-bar-wrapper .header-background-solid, .header .header-announcement-bar-wrapper .header-blur-background {
    height: 0% !important; 
  }
}

@Jia Thanks so much for the code tweak! I had actually tried that and with the additional brackets, the drop shadow remains on the blog pages. I have the code you suggested in the custom css now. Any other thoughts as to how to remove the shadow only from the blog pages?

1 hour ago, ann_nola said:

@Jia Thanks so much for the code tweak! I had actually tried that and with the additional brackets, the drop shadow remains on the blog pages. I have the code you suggested in the custom css now. Any other thoughts as to how to remove the shadow only from the blog pages?

Try adding this to the Blog's Page Header + Post Blog Item Code Injection (Page Settings > Advanced):

<style>
.header .header-dropshadow, .header .header-announcement-bar-wrapper .header-background-gradient, .header .header-announcement-bar-wrapper .header-background-solid, .header .header-announcement-bar-wrapper .header-blur-background {
  height: 0% !important; 
}
</style>

Let me know how it goes 🙂 

@Jia That worked! Thank you very much.