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

CSS

Posted by dejankerneza
dejankerneza
8,336 Points

Navigation bar

I'm currently working on my own project and I want to implement <a href="http://codepen.io/SaraSoueidan/pen/bogtz/">this</a> menu.

Menu: http://codepen.io/SaraSoueidan/pen/bogtz/

I need to change menu to only show icons and when you hover it shows text like it does on smaller screens

Jason Kingery
Jason Kingery
236 Points

It's sloppy, but I was just breaking from learning Android Development.

http://codepen.io/anon/pen/pvqBqK

3 Answers

Colin Bell
Colin Bell
29,679 Points

Are you just wanting the menu to be the same on large screens as it is on small screens? If so, just take out the media query that's setting the limitation (Just the @media line and its closing bracket. Leave the actual code there):

/* Delete this  
 @media only screen and (max-width : 860px){ */

  .text{
    display:none;
  }

  .nav-container , a{
    width: 70px;

  }

  a:hover{
    width:200px; 
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
  }

  a:hover  .text {
    display:block;
    padding-left:30%;
  }

/* don't forget to delete its closing bracket too
} */

http://codepen.io/anon/pen/jEdEKY

Jason Kingery
Jason Kingery
236 Points
Jason Kingery
Jason Kingery
236 Points

New to the forums, didn't realize there was an answer section.

Just use:

visibility:hidden;

and 

visibility:visible;

http://codepen.io/anon/pen/pvqBqK

dejankerneza
dejankerneza
8,336 Points
dejankerneza
dejankerneza
8,336 Points

I have found what I was looking for. Thanks all for help. Treehouse comunity is the best