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 trialAna Paula Daros
8,436 PointsProblem with links when building a centered navigation with a logo in the middle
Hello, I'm a beginner with HTML and CSS and while building a header for a friend's website I'm working on, I got a weird problem.
When I hove the links "sobre" and "contato" they appear unclickable, while the logo does not.
Here's my HTML
...
<header>
<ul class='nav'>
<li><a href="#sobre">sobre</a></li>
<li><a href="#contato">contato</a></li>
</ul>
<div class="logo"><a href="#home"><img src="img/img.png"></a></div>
</header>
and the CSS
html, body {
height: 100%;
margin-top: 0;
padding: 0;
}
.main {
margin: auto;
}
header {
padding: 5px 5px -5px 5px;
text-align: center;
}
#home,
#sobre,
#contato {
height: 100%;
}
.logo {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 18px;
top: 10px;
}
ul.nav {
padding: 0;
}
.nav li {
display: inline;
text-align: center;
}
.nav li:first-child {
padding-right: 200px;
}
.nav li a {
color: #979797;
text-decoration: none;
font-family: 'HelveticaNeue', sans-serif;
font-weight: 100;
font-size: 1.5em;
-webkit-transition: color 0.3s;
}
.nav li a:hover {
color: #0069ff;
text-decoration: none;
-webkit-transition: color 0.5s;
}
When I mark the CSS below as a comment, the links are clickable again.
.nav li {
display: inline-block;
text-align: center;
}
Does it have something to do with the positioning?
Thanks.
2 Answers
notf0und
11,940 PointsTry inspecting it with Chrome or Firefox. The links are clickable, but your logo takes up the space in front of them. If you put your mouse over the very bottom of the words, you'll see that you can click the links.
As for fixing that, I'm not sure..
Hope this sets you on the right track, and you're able to fix it.
Ana Paula Daros
8,436 PointsThanks, Bryan. I removed the logo to test, and now I can click the links. I'll look for positioning tips so I can get it fixed.