Debugging: When Plugins Collide

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