JS/CSS feature working in original template but not in my version

Marisa
Marisa used Ask the Experts™
on
There is feature is working in the template I'm using but isn't working in my live site.

If you go here to the original template:
https://eagle-themes.com/templates/zante/index2.html
and look at the "OUR AWESOME SERVICES" section, you'll see the feature I'm trying to make work on my live site.

But if you go here to the live site:
https://www.stadriemblems.com/products/enamel-pins-test/
you'll see where I placed it, but it's not displaying properly.

Note that it does seem to be functioning properly, just not displaying any of the css. I figured there must be some external asset that it relies on that is in the original template but is missing from the working site, but all assets from the original template have been carried over to the live site.

I'm going crazy with this. It's probably something really simple, but I have been looking at it too long and can no longer see it.

Hopefully someone can figure this out!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

you have a javascript error on the original
Uncaught TypeError: $grid.imagesLoaded is not a function at HTMLDocument.<anonymous> (main.js:6)

Open in new window


and several errors on the other web site

to see these errors using Chrome right click /inspect

so you have to fix them all, most of them are 404 error this mean the file is not there or the link is not good
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
If you look at the original site the styling for the grey box with triangle on the left is as follows
#features .owl-thumb-item.active {
	background: #333;
	color: #fff;
	-webkit-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

Open in new window

You have this in your style.css
But....
You don't have a container with id="features"
So your styles are not triggering.
It might be a bit confusing as there is a container with
data-slider-id="features"

Open in new window

However this is not the one you are looking for

If you look in the Zante site there is a <section> a few lines up from the panel in question that has the id you need.

All you need to do is
Either
a) Change the #features reference in your styles.css file to match something that is actually on the page so  that the .owl-thumb-item.active class is in the style path
OR
b) Add an id="features" to some parent above your .owl-thumb-item.active  class.
MarisaWeb Design

Author

Commented:
I knew it was going to be something so simple that I had overlooked and couldn't see because I'd been staring at it for way too long! So simple. Thank you!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial