Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When you add more than one plugin to a site, you may run into problems -- the two plugins might interact in ways you didn't expect. That's the case with the sticky nav and the carousel plugins. Unfortunately, there can be multiple reasons why plugins don't work well together. So in this video, I'll step you through a technique for debugging plugin problems.
Resources
Related Treehouse Videos
When you add more than one plugin to
a site, you may run into problems.
0:00
The two plugins might interact
in ways you didn't expect.
0:04
That's the case with the sticky nav and
the carousel plugins.
0:08
Unfortunately, there can be multiple
reasons why plugins don't work
0:12
well together.
0:15
So in this video, I'll step you through
a technique for debugging plugin problems.
0:16
Now that the carousel plugin is working
it looks like the sticky nav is broken.
0:22
I'll use the developer's tools again
to do a little detective work.
0:27
You can see the changes that
the sticky plugin is making.
0:31
These flashes of color and
new code indicate the live editions and
0:35
changes that the plugin makes.
0:39
But lets see where the nav bar went.
0:41
Remember from the last section of this
course that the sticky plugin creates
0:43
a div and wraps it around the element that
we want to stick to the top of the page.
0:47
There's the element so
it's still there and
0:53
inside it is the header
that we want to stick.
0:55
So for some reason, it's there but
we just can't see it.
0:58
Notice that the style for
this says its position is fixed.
1:02
Fixed positioning in CSS works
like absolute positioning.
1:07
The element is taken out of
the flow of the web page,
1:10
and other elements can appear above or
below it.
1:13
Maybe that's what's happening.
1:16
It's just that the carousel is
just on top of the nav bar,
1:17
that's why we can't see it.
1:20
I'll add a z-index property,
and see if that helps.
1:22
The z-index value controls the layering
of absolute and fixed position elements.
1:27
An element with a higher
z-index will appear above and
1:32
on top of an element
with a smaller z-index.
1:35
That did it!
1:38
I just need to add that to the CSS file.
1:40
Click the launch workspace button
if you want to follow along, and
1:43
open the main.css file.
1:47
I'll find the is-sticky header style and
add a z-index to it.
1:51
I'll save the file and
preview the workspace.
2:00
Excellent!
2:03
It works.
2:05
It's not uncommon that plugins
interact in weird ways.
2:06
Since the people who create plugins
can't know what other plugins
2:10
someone might use with theirs,
it's up to you, the designer and
2:13
web developer, to try to figure out
what the problem is, and how to fix it.
2:17
The developer's tools and
a good knowledge of HTML, CSS, and
2:21
JavaScript are your best tools for
solving these kinds of problems.
2:25
You need to sign up for Treehouse in order to download course files.
Sign up