How can I target specific subnav dropdowns on a blog post page using CSS

Pro Tips Other Tips
1

Suppose we need to target Shop Subnav Dropdown on a Blog Post using CSS code

We can use this CSS code

body[class*="type-blog"] div.header-nav-item:nth-child(1) div.header-nav-folder-content {enter your CSS code}

Explain
body[class*=“type-blog”] is ID of Blog Page + Blog Posts
div.header-nav-item:nth-child(1) is First Navigation Item

image
image1083×233 49.9 KB

div.header-nav-folder-content is ID of Dropdown

image
image660×287 26.8 KB

Some example If you want to change dropdown background color on blog page, we will use CSS code like this

body[class*="type-blog"] div.header-nav-item:nth-child(1) div.header-nav-folder-content {
    background-color: #f1f !important;    
}

image
image628×237 25.2 KB

If change dropdown width, use this

body[class*="type-blog"] div.header-nav-item:nth-child(1) div.header-nav-folder-content {
    min-width: unset !important;
    width: 400px !important;
}

image
image977×240 10.1 KB