0

I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.

There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.

All the pages within each tab/category on the nav bar should have a different background.

Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.

Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.

I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.

Example:

.container .hats {
background: blue;
}

There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.

Any help?

EDIT

**My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background. **

  • can you share link of your site ? – Temani Afif Dec 28 '17 at 11:39
  • My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background. – Jimmie Davis Dec 28 '17 at 15:19
  • and an you show us the site :) it's difficult to give answer without the code – Temani Afif Dec 28 '17 at 15:21
0

If for example the shoe tab is second in the nav you could use

nav li:nth-child(2) {
}

For that and let's say hats are the fourth tab, you would use:

nav li:nth-child(4) {
}

This selects the 2nd and the 4th element that is li inside the nav:

<nav>
  <li></li>
  <li></li> <-this gets selected
  <li></li>
  <li> <-and this gets selected
    <ul>
      <li></li>
    </ul>
  </li>
</nav>
  • My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background. – Jimmie Davis Dec 28 '17 at 15:16
  • The simplest solution would be to somehow add a class to that whole page (or the parent element of the elements that need to be colored, or every element that needs to be colored) based on shoe brand or category(or however it is defined in your site). The you could do something like .nike .container { // css code - if wrapper or body has the class } or .element.nike { // css code - if every element that needs to be colored had the class } – D. Dan Dec 28 '17 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.