-1

This problem could not be only for the WordPress cms, but also any other page.

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.

Jimmie Davis
  • 27
  • 4
  • 1
    well, you already posted the same question on wordpress.exchange :) why here ? – Temani Afif Dec 28 '17 at 13:14
  • These pages would share the same category and therefore would have the same *body class* applied. you should use this body class as your base selector to declare your styles to the `.container` elements of the given pages, e.g: `.term-hats .container { background: blue; }` – UncaughtTypeError Dec 28 '17 at 13:58

1 Answers1

0

I found another post which helped in changing the specific CSS.

Change CSS when the current URL contains a certain string

Using JavaScript, you are able to search for specific parts of the url. If the URL contains the term or index you want, you can make changes the elements on the documents.

<script type="text/javascript">
    $(document).ready(function () {
        if (window.location.href.indexOf("hats") > -1) {
           $(".site-content").css("background-color", "red");
        } if (window.location.href.indexOf("shoes") > -1) {
           $(".site-content").css("background-color", "green");
    }});
</script>

The downside I noticed was that the page does not update the specified css immediately but a small delay is seen between the background color change.

Alternatively, you can use plain css targeting the product class in the body for each item. It will be tedious if you had a lot of pages, but the provides no delay in changing the background colors from default to the set value.

Jimmie Davis
  • 27
  • 4