1
00:00:00,790 --> 00:00:04,900
When you add more than one plugin to
a site, you may run into problems.

2
00:00:04,900 --> 00:00:08,500
The two plugins might interact
in ways you didn't expect.

3
00:00:08,500 --> 00:00:12,240
That's the case with the sticky nav and
the carousel plugins.

4
00:00:12,240 --> 00:00:15,550
Unfortunately, there can be multiple
reasons why plugins don't work

5
00:00:15,550 --> 00:00:16,640
well together.

6
00:00:16,640 --> 00:00:21,210
So in this video, I'll step you through
a technique for debugging plugin problems.

7
00:00:22,650 --> 00:00:27,340
Now that the carousel plugin is working
it looks like the sticky nav is broken.

8
00:00:27,340 --> 00:00:31,560
I'll use the developer's tools again
to do a little detective work.

9
00:00:31,560 --> 00:00:35,000
You can see the changes that
the sticky plugin is making.

10
00:00:35,000 --> 00:00:39,040
These flashes of color and
new code indicate the live editions and

11
00:00:39,040 --> 00:00:41,630
changes that the plugin makes.

12
00:00:41,630 --> 00:00:43,840
But lets see where the nav bar went.

13
00:00:43,840 --> 00:00:47,940
Remember from the last section of this
course that the sticky plugin creates

14
00:00:47,940 --> 00:00:53,160
a div and wraps it around the element that
we want to stick to the top of the page.

15
00:00:53,160 --> 00:00:55,740
There's the element so
it's still there and

16
00:00:55,740 --> 00:00:58,410
inside it is the header
that we want to stick.

17
00:00:58,410 --> 00:01:02,420
So for some reason, it's there but
we just can't see it.

18
00:01:02,420 --> 00:01:05,850
Notice that the style for
this says its position is fixed.

19
00:01:07,170 --> 00:01:10,600
Fixed positioning in CSS works
like absolute positioning.

20
00:01:10,600 --> 00:01:13,090
The element is taken out of
the flow of the web page,

21
00:01:13,090 --> 00:01:16,140
and other elements can appear above or
below it.

22
00:01:16,140 --> 00:01:17,740
Maybe that's what's happening.

23
00:01:17,740 --> 00:01:20,840
It's just that the carousel is
just on top of the nav bar,

24
00:01:20,840 --> 00:01:21,890
that's why we can't see it.

25
00:01:22,950 --> 00:01:25,810
I'll add a z-index property,
and see if that helps.

26
00:01:27,360 --> 00:01:32,450
The z-index value controls the layering
of absolute and fixed position elements.

27
00:01:32,450 --> 00:01:35,600
An element with a higher
z-index will appear above and

28
00:01:35,600 --> 00:01:38,880
on top of an element
with a smaller z-index.

29
00:01:38,880 --> 00:01:40,100
That did it!

30
00:01:40,100 --> 00:01:42,560
I just need to add that to the CSS file.

31
00:01:43,870 --> 00:01:47,100
Click the launch workspace button
if you want to follow along, and

32
00:01:47,100 --> 00:01:48,860
open the main.css file.

33
00:01:51,280 --> 00:01:57,104
I'll find the is-sticky header style and
add a z-index to it.

34
00:02:00,142 --> 00:02:03,508
I'll save the file and
preview the workspace.

35
00:02:03,508 --> 00:02:05,359
Excellent!

36
00:02:05,359 --> 00:02:06,810
It works.

37
00:02:06,810 --> 00:02:10,170
It's not uncommon that plugins
interact in weird ways.

38
00:02:10,170 --> 00:02:13,760
Since the people who create plugins
can't know what other plugins

39
00:02:13,760 --> 00:02:17,070
someone might use with theirs,
it's up to you, the designer and

40
00:02:17,070 --> 00:02:21,410
web developer, to try to figure out
what the problem is, and how to fix it.

41
00:02:21,410 --> 00:02:25,370
The developer's tools and
a good knowledge of HTML, CSS, and

42
00:02:25,370 --> 00:02:29,240
JavaScript are your best tools for
solving these kinds of problems.