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 Elijah Collins
Elijah Collins
19,457 Points

Css Twitter Bootstrap for Mobile Navigation

I'm taking a mobile first approach with my website and I'm trying to understand how to use css to activate the twitter bootstrap icon for my mobile navigation. When I make the adjustments on a responsive css using media queries the bootstarp icon acts as an inactive button. I've tried multiple approaches from this and other forms, so if anyone can break it down line for line for me how I can change lines that would be awesome

<!DOCTYPE html>
<html lang "eng">
    <head>
        <meta charset "utf-8">
        <title>EC The Photographer</title>
        <!-- <link rel="stylesheet" href="css/normalize.css"> -->
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/ec.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="header">
            <a href="index.html" atl="Logo">
                <img src="img/ec_logo.png" alt="E C the photographer logo" class="logo">
            </a>
            <div class="navbar">
                <nav>
                    <a href="index.html" id="menu-icon"></a>
                    <ul>
                        <li><a href="index.html" class="current">Home</a></li>
                        <!-- Photography Drop Down Menu -->
                        <li><a href="photos.html">Photography</a>
                            <ul class="pic-dropdown">
                                <li><a href="models.html">Modeling</a></li>
                                <li><a href="portraits.html">Portraits</a></li>
                                <li><a href="fashion.html">Fashion</a></li>
                                <li><a href="events.html">Events</a></li>
                                <li><a href="weddings.html">Weddings</a></li>
                            </ul>
                        </li>

                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
            </nav>
        </div>
            <p>Bay Area Photographer, San Francisco, CA</p>
        </div>
        <div id="wrapper"></div>
            <section>
            </section>
            <div class="footer">
                <a href="https://www.facebook.com/ecthephotographer">
                    <img src="social-icons/facebook.png" alt="Follow me on Facebook" class="social-icon"></a>

                    <a href="https://twitter.com/EC_photos">
                    <img src="social-icons/twitter.png" alt="Follow me on Twitter" class="social-icon"></a>

                    <a href="http://instagram.com/ecthephotographer">
                    <img src="social-icons/instagram.png" alt="Follow me on Instagram" class="social-icon"></a>

                    <a href="https://vimeo.com/ecphotos">
                    <img src="social-icons/vimeo.png" alt="Watch me videos on Vimeo" class="social-icon"></a>

                    <p>&copy; 2014 EC The Photographer.</p>
            </div>
        </div>  
    </body>
</html>

body {
    font-family: 'Open Sans', sans-serif;
  margin: 0;
}

.logo {
    max-width: 70%;
    margin: 0;
}

.Header p {
    font-size: 1em;
    margin: 0 0 0 6.99999%;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

/*---------------------------------------------------------------------Header-----------------------------------------------------------------------------*/



/*---------------------------------------------------------------------nav-----------------------------------------------------------------------------*/

.navbar ul {
    text-decoration: none;
    list-style: none;
    background-color: ;
    color: #000;
    display: inline-block;
  padding-bottom: 5%;
}

.navbar ul li {
    text-decoration: none; 
    list-style: none;
    color: #000;
    display: inline-block;
  padding-bottom: 5%;
}

.navbar ul li a {
    text-decoration: none;
    list-style: none;
    color: #000;
    display: inline-block;
  padding-bottom: 5%;
}

.navbar ul li {
    float:left;
    position:relative;
    margin:0 10px;
}

.navbar li li {
    float:none;
}

.navbar li li a {
  white-space:nowrap;
}

.navbar li ul {
  position:absolute;
  top:1.1em;
  right:0;
  display:none;

}

.navbar li:hover ul{
    display:block;
}

.pic-dropdown li:hover a {
  color: rgba(255, 0, 0, 0.8);
  border-bottom: .09em solid red;
}

 ul.navbar li ul li a {
  padding:0;
  margin:0;
  display:none;
  position:absolute;/*Added*/
  z-index:2;/*Added*/
}

/*---------------------------------------------------------------------Footer-----------------------------------------------------------------------------*/

.footer {
  text-align: center;
  clear: both;
  padding-top: 2%;
  margin: 5% 0 0 0;
}

.footer p{
  color: #4F5254;
  font-size: 0.85em;
  text-align: center;
}


.social-icon{ 
  display: inline-block;
  max-width: 5%;
  max-height: 5%;
  clear: both;
  margin: 0 2%;
}

/*---------------------------------------------------------------------about-----------------------------------------------------------------------------*/

.profile-pic {
  max-height: 40%;
  max-width: 40%;
  display: block;
  clear: both;
  float: left;
  margin: 1% 3% 2% 2%;

}


.bio p {
    font-size: .85em;
  margin: 3%;
  /*margin-top: 6%;*/
}

```Responsive Css page

/--------------------------------------------------------------Phone---------------------------------------------------------------------------/

@media screen and (min-width: 450px) {

.header p{
    visibility: hidden;
}

}

/--------------------------------------------------------------Tablet---------------------------------------------------------------------------/

@media screen and (min-width: 660px) {

.header p {
    visibility: visible;
}

/--------------------------------------------------------------Webpage---------------------------------------------------------------------------/

2 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Elijah Collins. Please put your code in an online editor like CodePen. The code you have is way to much for the forum.

Elijah Collins
Elijah Collins
19,457 Points
Elijah Collins
Elijah Collins
19,457 Points

Chase James I apologize first time posting in the form but here is a CodePen link

http://cdpn.io/wBbHp