Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Flexbox Layout Animating Flexbox

Problem with data-icon!

Hey i have added my icons so that they are next to my links, but when i set overflow: hidded; to my nav links element it doesnt make the icon disapear?

anyone have an idea how to fix this?

heres the code

/******************
NAVIGATION LINKS STYLING
*************************/

.nav a {
    padding: 10px 40px 10px 40px; 
    width: 100%;
    position: relative;
}


.nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position: absolute;
  top: px;
  left: -30%;
}

.nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

.nav li {
  position: relative;
    display: inline-block;
    font-size: 14px;
}


/*NAVIGATION SELECTORS*/

.nav {
    text-align: right;
    width: 50%;
    float: right;
    padding-bottom: 2%;
  margin-top: 5%;

}

AND THE HTML

<nav class="nav">
          <ul>
            <li><a class="nav-links selected" href="index.html" data-icon="&#xe900;">Home</a></li>
            <li><a class="nav-links" href="about.html">About</a></li>
            <li><a class="nav-links" href="contact.html">Contact</a></li>
          </ul>
        </nav>

I notice that you don't have a top property set correctly for your nav a::before selector. You need to give that top property some value instead of just "px".

If that does not fix your problem, please come back and post your full code. It will help us better help you if we have more than just a snippet of code. Thanks!

heres the full css code for the nav and header

:root {
    font-family: 'Roboto Slab', serif;
    min-height: 98%;
    border-bottom: 40px solid #0c4750;
}

* {
  -webkit-border-radius
}

/*BODY SELECTOR*/


body {
    height: 100%;
    background: hsl(188, 74% , 21%);
    background: -webkit-linear-gradient(#0e535d , #8ce1ee);
    background: -moz-linear-gradient(#0e535d , #8ce1ee);
    background: -ms-linear-gradient(#0e535d , #8ce1ee);
    background: -o-linear-gradient(#0e535d , #8ce1ee);
    background: linear-gradient(#0e535d , #8ce1ee);
    color: #FFFFFF;
    line-height: 1.6;
}

/*THE CONTENT AREA*/
.container {
    max-width: 1000px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 5%;
}

/* STYLES THE h1 and h2 and paragraph on the page */

h1, h2 {
    margin-bottom: .28em;
    font-weight: bolder;
    font-size: 28px;
    font-family: 'Droid Serif', serif;
    text-shadow: 1px 1px 1px black;



}

p {
    font-weight: bold;
    font-size: 18.88px;
    margin: 0.8em 0;


}

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.woff') format('woff'),
      url('../fonts/icomoon.ttf') format('truetype'),
      url('../fonts/icomoon.svg#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;

}

/*************
HEADER STYLING
*******************/

header {
   float: left;
   position: relative;
   margin: 0 0 40px 0;
   padding: 0 0 0 0;
   width: 100%;
   min-height: 100%;
   overflow: hidden;
}


header {
    background:#0b3f47;
    border-color: #0b3f47;

}

header {
    border-bottom: 6px solid #082f35;
    border-top: 6px solid #082f35;
    margin-bottom: 110px;
}

.image {
  width: 50%;
  float: left;
}


.intro-pic {
    position: relative;
    display: block;
    margin: auto 0;
    text-align:center;
    top: -5px;
    bottom: -5px;
    left: -2px;
}


.image {
  top: 50%;
  bottom: 50%;
}



/*STYLING FOR THE OTHER LINKS ON THE PAGE*/

a.Other-links {
    text-decoration: none;
    color: #101010;
}

a.Other-links:hover {
   text-decoration: underline;
   color:#000;
}




/******************
NAVIGATION LINKS STYLING
*************************/
a.nav-links  {

  background-color:#006b8f;
  height: 100%;
  margin: 5px 0px 0px 2px;
  padding: 0px 5px 0px 5px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  text-decoration:none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  text-shadow: 1px 0 1px black;
  border: 2px solid black;
}

a.nav-links:hover {
    background-color:#00506b;   
    -moz-box-shadow: 0px 0px 1px black; 
    -webkit-box-shadow: 0px 0px 1px black;
    box-shadow: 0px 0px 1px black;

}

a.nav-links.selected {
  background-color:#00506b;
}

.nav a {
    padding: 10px 40px 10px 40px; 
    width: 100%;
    position: relative;
    overflow: hidden;
}


.nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position: absolute;
  left: -30%;
}

.nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

.nav li {
  position: relative;
    display: inline-block;
    font-size: 14px;
}


/*NAVIGATION SELECTORS*/

.nav {
    text-align: right;
    width: 50%;
    float: right;
    padding-bottom: 2%;
  margin-top: 5%;

}

2 Answers

In your * selector, you don't have -webkit-border-radius set properly. You also need to put that top property back into your .nav a::before rule. It just wasn't set right when you first had it. You should set it to 10px as Guil does in the video. As far as errors go, that's all I'm seeing for your CSS. If fixing those errors doesn't fix the problem, we will also need your HTML file.

hey i did put the top to 10px but it did not help, heres my html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Erdrag's Official Website">
    <meta name="author" content="Erdrag">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:700|Roboto+Slab' rel='stylesheet' type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Erdrag Official Website</title>
</head>
 <body>
     <header class="main-header">
        <div class="image">
          <a href="index.html">
            <img class="intro-pic img" src="img/mainlogo.png" title="Home" alt="logo">
          </a>
        </div>
        <nav class="nav">
          <ul>
            <li><a class="nav-links selected" href="index.html" data-icon="&#xe900;">Home</a></li>
            <li><a class="nav-links" href="about.html">About</a></li>
            <li><a class="nav-links" href="contact.html">Contact</a></li>
          </ul>
        </nav>
    </header>  
      <div class="container"> 
        <div class="work">
          <h2>What you will see!</h2>
          <p>Some things that you can / are going to see on this website,
            in the future is me creating stuff for fun. like websites, simple
            visual programming games and more! (Read more about it in the "About" section)

            A great site i use to learn about all kind of different things is the<a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> website.</p>
        </div>
        <div class="still-learning">
         <h2>Still learning!</h2>
         <p>Im still learning all the things about Web development, web design, and much more, and you never run out of things to learn. Some sites i can reccomend that has great tutorials and forums is <br> <a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> &amp; <a class="Other-links" href="http://sololearn.com" target="_blank">Sololearn</a></p>
        </div>
        <div class="github-mobile">
        <a href="#" target="_blank"><img class="github-mobileimg" src="img/github.png" title="Github Profile!" alt="github profile"></a>
        </div>
         <br>
        <footer class="copyright">
          <a href="#"><img src="img/facebook2.png" title="Facebook" class="social-icon" alt="Facebook Logo"></a>
          <a href="#" target="_blank"><img src="img/twitter2.png" title="Twitter" class="social-icon" alt="Twitter Logo"></a>
          <a href="http://teamtreehouse.com/erdragerdragsson"><img src="img/mail2.png" title="mail" class="social-icon" alt="Mail icon"></a>
          <a href="https://www.google.se/#q=not+yet"><img src="img/instagram.png" title="Instagram or sumtin" class="social-icon" alt="Instagram or sumtin"></a>
          <p class="copyright-text">&copy; Erdrag 2015, All rights reserved.</p>
        </footer> 
        <div id="date-stamp"> 
        <script LANGUAGE="Javascript">

            var stampdays = new Array( "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

             // Month Names - Guess what this array does. 0..11 to the system clock month

            var stampmonths = new Array( "January","February","March","April","May","June","July","August","September","October","November","December");

             // GRABS the Date info from your System clock when your Browser reads  enters the page.

            var thedate = new Date();

            //Gets the Translated Arrays written to the webpage for viewing. Remember you can use this for other things, too
            document.write(stampdays[ thedate.getDay()] + ", " + stampmonths[ thedate.getMonth()] + " " + thedate.getDate() + ", " +   thedate.getFullYear());
          </script>   
          </div> 
      </div>
      <div class="github-span">
      <a href="https://github.com/Erdrag" target="_blank"><img class="github" src="img/github.png" title="Github Profile!" alt="Github"></a>
      <img src="img/chat.png" class="github-chat" alt="Chat bubble">
    </div>
  </body>
</html>

It seems that the only issue there is (after fixing the -webkit-border-radius and top properties in the CSS) was changing the data icon. I changed the home icon to the one that Guil uses &#xe602;.

EDIT: I figured out why this works, as well. It looks as though you got the code for the "home" icon from the http://icomoon.io site which lists one of those home icons as &#xe900;. This code, though, is for the new version of icomoon which we aren't using. We are using the old version of icomoon and the codes are different for the old version, which is why new codes won't show up.

i added the the code guil used, but i cant see the icon even if i remove the overflow hidden property

and when i add the hover state like this, nothing happends

.nav a:hover::before {
  left: 10%;
}

do i need to download the files for the icons guil is using or does it matter?

After changing the icon to &#xe602; I was able to see the icon clearly. It was off from the button of course. Did you read my updated comment?

I was able to make a neat transition, though, by setting this:

.nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position: absolute;
//Changed left to -1000%
  left: -1000%;
  top: 10px;
  transition: .4s;
}

i still cant see the icon hmm :/

i changed the data-icon back to the one i had first and now the transition works, but i does not overflow hidden

for the data-icon guil used, to i need to download something?

Guil is using an old version which is packaged as part of the project files. I don't know where you got your icomoon files, but that's where I got the ones I used. I assumed that you had done the same thing since you are using some of the same code. With those icomoon files, though, I had to use the old codes that Guil uses to get them to even show up. I honestly have no idea what to do next.

i choosed 3 icons at icomoon then downloaded a file with 4 differents format (.eot .woff .ttr .sbg)

does that effect anything? did guil use different format files for those icons he used, or does it even matter?

Do you know anyone who might know whats going on? Guil Hernandez ?

It may be that I'm an idiot, and I forgot how icomoon worked. I don't even think it's an old version per se, actually. I think that the ones that Guil includes only have those icons in the files that he uses on the page. That's why I was able to use that code, and you weren't. I feel pretty dumb right now! LOL!

oh okey, that explains pretty much, but i still dont get how the overflow thing isnt working? :/

The overflow issue may be because Guil's layout is using flexbox and yours is not. Then again, I really don't know. Good luck, erdrag!

yeah, i fixed it sort off, i displayed it none, then at hover i displayed it inline, but now the transition is gone but anyway,

thanks for helping me! i appreciate it:)

EDIT: I fixed it with the z-index property!

Yay! :D It seems like you deserve your own best answer :P

one thing more :P do you have any idea why the icons transitions leave a trail ?

If you're still using that "left: 1000%" property, the trail is from where the icon is placed all the way off the screen and transitions to the second location. If you don't like that, you could set the display of that before declaration to none, and then just have it display on hover.