Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Underwood
Full Stack JavaScript Techdegree Student 19,916 PointsNot able to fix carousel to go beneath the navbar...
I followed the instructions the video to use z-index to have the nav bar to be on top of the carousel with no luck. I have spent the last couple of hours researching and online and most sites say to use z-index. I am using the latest version of Slick directly from their site, not the version from Workspaces. Any help would be appreciated
Chris
Here is my latest code:
main.css header { background-color: white; transition: 1s; }
.is-sticky header { background-color: black; position: fixed; z-index: 1000; }
.is-sticky header a { background-color: paleturquoise; border-radius: 5px; }
.is-sticky header #work { background-color: white;
}
.slides { position: relative; z-index: 1; }
Index.html <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Agency - A Treehouse template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSS--> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="js/animsition/animsition.css"> <link rel="stylesheet" href="js/slick/slick.css"> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="row container animsition"> <header class="row header"> <div class="grid-third"> <a href="index.html" class="logo"></a> </div> <div class="grid-third"> <h1 class="description">We build apps</h1> </div> <div class="grid-third"> <nav> <a href="#" class="active">Home</a> <a href="work.html" >Work</a> <a href="team.html" >Team</a> </nav> </div> </header><!--/header--> <div class="row"> <div class="grid-full"> <div class="slides"> <div class="slide blue"> <div class="grid-half"> <h2>DailyFeed</h2> <p>Your number one podcast app</p> <a href="#" class="button">Check it Out</a> </div> <div class="grid-half"> <img src="img/slide-dailyFeed.png" alt="" /> </div> </div><!--/Slide 1-->
<div class="slide orange">
<div class="grid-half">
<h2>ChitChat</h2>
<p>The worldest easiest to use cross device chat app</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-chitChat.png" alt="" />
</div>
</div><!--/Slide 2-->
<div class="slide green">
<div class="grid-half">
<h2>MixTape</h2>
<p>An app to search, create and share mixtapes</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-mixTape.png" alt="" />
</div>
</div><!--/Slide 3-->
<div class="slide yellow">
<div class="grid-half">
<h2>KITT</h2>
<p>Turn your car into KITT from Knight Rider</p>
<a href="#" class="button">Check it Out</a>
</div>
<div class="grid-half">
<img src="img/slide-Kitt.png" alt="" />
</div>
</div><!--/Slide 4-->
</div>
</div>
</div>
<div class="main row">
<div class="grid-third">
<img src="img/sticker-team.png" alt="" />
<p>United we stand divided we fail. Meet the all star team behind the agency.</p>
<a href="team.html" class="button">Meet the Team</a>
</div><!--/team-->
<div class="grid-third">
<img src="img/sticker-work.png" alt="" />
<p>Check our latest app builds or download them in the App Store.</p>
<a href="work.html" class="button">Latest Projects</a>
</div><!--/work-->
<div class="grid-third">
<img src="img/sticker-contact.png" alt="" />
<p>Have questions or requests? Feel free to contact us, we’d love hear from you.</p>
<a href="#" class="button">Contact Us</a>
</div><!--/contact-->
</div>
</div><!--/main-->
<footer>
<div class="row">
<div class="grid-full">
<p>Connect with us</p>
<ul class="social">
<li>
<a href="#" class="pink"></a>
<a href="#" class="light-blue"></a>
<a href="#" class="dark-blue"></a>
</li>
</ul>
</div>
</div>
</footer><!--/footer-->
</div>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="js/animsition/animsition.js"></script>
<script src="js/sticky/jquery.sticky.js"></script>
<script src="js/slick/slick.js"></script>
<script src="js/main.js"></script>
</body>
</html>
4 Answers
Chris Underwood
Full Stack JavaScript Techdegree Student 19,916 PointsI was able to get this fixed. I figured out that something called element.style was overriding the z-index property that I was using. Adding !important to the z-index: 1000 !important; got it to work. Now I need to figure out what element.style is.
Damien - thank you so much for taking the time to look at this question. I cannot answer your question as the whether this is a question of not being siblings or not. My answer would leave to me believe that it is not the case. I did find this article that told me more about z-index than I ever would want to know. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
For anyone who is from Treehouse reading this, I used the newest versions of both the Slick and Sticky plugins which may have introduced this bug.
Thanks again Damien. I hope to return the favor someday.
Klobi Tonne
8,571 PointsHey,
the element.style are the default values which are applied when the element becomes sticky. If you go to the jquery.sticky.js and search for "var defaults" you'll find the "zIndex: 'auto' " value. Just delete it and remove the "," after the last value.
Rob
Parker Brown
24,308 PointsTo follow up, I had the same problem and opened up jquery.sticky.js and found var defaults with the z-index: 'inherit' I removed it and it did not fix the problem. But that's a great suggestion to check the authored files that come with the plugin. I expected that to to do the trick, but the Chris Underwood's use of the important! override in the main.css file did the trick. Thanks guys!
Damien Watson
27,419 PointsHey Chris, a bit hard to read your code. Usually it has to do with the z-index and I can't see what your carousel is set to?
With z-index, one thing I learnt is that you have to apply it to children at the same level. I will try and illustrate to get the point across.
Should work
This is because 'nav' and 'container' are at the same child depth, even though 'carousel' is what you want to move backwards.
<div>
<div class="nav" style="z-index:10">
...
</div>
<div class="container" style="z-index:5">
<div class="carousel">
...
</div>
</div>
</div>
May not work
This is because 'nav' and 'carousel' have different child depths.
<div>
<div class="nav" style="z-index:10">
...
</div>
<div class="container">
<div class="carousel" style="z-index:5">
...
</div>
</div>
</div>
Let me know how you go, I haven't really seen this written anywhere so I'd love to know if it helps. Cheers.
Jeffrey Vierra
25,404 PointsI'm having the same issue. Rather than link the markdown. I figured it would be easier just to link the Github.
Thank you in advance.
Damien Watson
27,419 PointsDamien Watson
27,419 PointsNo problems Chris, glad to hear you fixed it. :)