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
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 PointsImages overlapping my navigation element.
Hi guys, I have been having some trouble with my portfolio page on my website, I want the navigation bar to be fixed so when I can scroll down I can still see it. But in my porfolio when I scroll down in the image gallery the images overlap the nav element.
/* NAVIGATION */
.main-nav { width: 100%; background: midnightblue; min-height: 30px; padding: 17px; position: fixed; text-align: center; }
.nav .name { display: block; margin-right: auto; color: white; font-size: 1.3em; }
.nav { display: flex; justify-content: space-around; font-weight: 700; list-style-type: none; margin: 0 auto; padding: 0; }
.nav li { padding: 5px 10px 10px 10px; }
.nav a { transition: all .5s; font-size: 1.1em; }
.nav a:hover { color: white }
.nav a.selected{ color: white; }
/******************************************************************************************************* -------------------------------------------PAGE: PORTFOLIO---------------------------------------------- ********************************************************************************************************/
gallery {
list-style: none; margin-top: 0px; padding-top: 7%; }
gallery li {
display: inline-block; padding: 7px; }
gallery li img {
border: 3px groove maroon; width: 384px; height: 288px; }
figure { width: 384px; height: 288px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; }
.hover09 figure img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover09 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0); }
Here is my html of the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juan Guillermo's Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head>
<body>
<div class="main-nav">
<ul class="nav">
<li class="name">Juan Guillermo Mariño</li>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<section>
<div class="hover09 column">
<ul id="gallery">
<h2>Memories...</h2>
<a href="images/port/port-1.jpg"><li><figure><img src="images/port/port-1.jpg"></figure></li></a>
<a href="images/port/port-2.jpg"><li><figure><img src="images/port/port-2.jpg"></figure></li></a>
<a href="images/port/port-3.jpg"><li><figure><img src="images/port/port-3.jpg"></figure></li></a>
<a href="images/port/port-4.jpg"><li><figure><img src="images/port/port-4.jpg"></figure></li></a>
<a href="images/port/port-5.jpg"><li><figure><img src="images/port/port-5.jpg"></figure></li></a>
<a href="images/port/port-6.jpg"><li><figure><img src="images/port/port-6.jpg"></figure></li></a>
</ul>
</div>
</section>
<footer>
<ul>
<li><a href="https://www.facebook.com/juanguillermo.marino">
<div class="social-popout"><img src="images/social/facebook.svg"></div>
</a></li>
<li><a href="https://twitter.com/Juangui97">
<div class="social-popout"><img src="images/social/twitter.svg"></div>
</a></li>
<li><a href="https://www.instagram.com/juangui097/">
<div class="social-popout"><img src="images/social/instagram.svg"></div>
</a></li>
<li><a href="https://plus.google.com/u/0/+JuanGuillermoMari%C3%B1o">
<div class="social-popout"><img src="images/social/googleplus.svg"></div>
</a></li>
<li><a href="https://github.com/juangui097">
<div class="social-popout"><img src="images/social/github.svg"></div>
</a></li>
</ul>
<p class="copyright">© Copyright 2017, Juan Guillermo Mariño</p>
</footer>
</body>
</html>
3 Answers
Fahad Mutair
10,359 Pointsso you can solve this problem with this line
section {
padding-top:60px;
}
and i made some change to this line here
.main-nav { z-index: 1;
width: 100%;
background: midnightblue;
min-height: 30px;
padding: 17px;
position: fixed;
text-align: center; }
Fahad Mutair
10,359 Pointshello Juan Guillermo Mariño , i think you can fix it with this line in your css
section {
position: relative;
z-index: -1;
padding-top:60px;
}
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 PointsHi, Fahad Mutair , it works but if I apply it the hover pseudoclass wont work...
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 Pointswow, man Fahad Mutair. EXCELENT, thank you soo much I really appreciate it.
Fahad Mutair
10,359 PointsYou're welcome :)