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

Konrad Pilch
Konrad Pilch
2,435 Points

Mobile nav

Hi, i have this challenge that in my code, my mobile navigation , when toggle on , it doesnt go straight down. It stops and i cant get the last link. Height is auto but it just doent wokr.

can you please post your code or post a link to what you're working on.

Konrad Pilch
Konrad Pilch
2,435 Points

This here:

  <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   </head>
    <body data-spy="scroll" data-target="#main-nav">

        <!-- Header -->
        <header class="object header backgroundImg" id="home">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
                    <div class="container">

                        <!-- Mobile Display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

                            <a href="" class="navbar-brand"><span class="color-red">A</span>asd <span class="color-red">S</span>dsa</a>
                        </div><!-- /navbar-header -->


                        <!-- Links -->
                        <div class="collapse navbar-collapse" id="main-nav">
                            <ul class="nav navbar-nav pull-right" id="links">
                                <li class="active">
                                    <a href="#home">Home</a>
                                </li>
                                <li>
                                    <a href="#focus">My Focus</a>
                                </li>
                                <li>
                                    <a href="#portfolio">My Work</a>
                                </li>
                                <li>
                                    <a href="#about">About</a>
                                </li>
                                <li>
                                    <a href="#">Blog</a>
                                </li>
                                <li>
                                    <a href="#contact">Contact</a>
                                </li>
                            </ul>
                        </div><!-- /navbar-1 -->

                    </div><!-- /container -->
                </div><!-- /container-fluid-->
            </nav>
            <div class="container">
                <div class="headerContainer">
                    <div class="header-text">
                        <h1>Asd</h1>
                        <p>Web Developer & Designer,Leicester<p>
                    </div>
                    <div class="buttons">
                        <a href="" class="btn btn-primary custom-button red-btn">My Work</a>
                        <a href="" class="btn btn-primary custom-button green-btn">Contact</a>
                    </div><!-- /buttons -->
                </div><!-- /headercontainer -->
            </div><!-- /container -->
        </header>

CSS:

/*

My Custom JS
============

Author:  Konrad Pilch
Updated: 22 February 2015
Notes:   Portfolio Website

Email: konradpilll@libero.it
Mobile: 07507 754271
*/


/* Colors */
.color-red{
  color:red;
}
.custom-button{
  padding:9px 35px 9px 35px;
  border-radius:6px;
  font-size: 16px;
}
.heading{
  color:#FFF;
}
.heading-black h1{
font-size: 4em;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
}
.heading h1{
  font-family: 'Ubuntu', sans-serif;
  font-weight:bold;
}
#contact, #about h1{
  font-size:3.5em;
}

/* --------------------------------------
   Global Styles
   -------------------------------------- */
h1,h2,h3,h4,h5,h6{
   margin:0; 
}
h1{
  text-align: center;
}
h3{

}
html,body{
   height:100%;
   width:100%;
}
.header{
  font-size: 2em;
}
.backgroundImg{
 background: url('../../img/img2.jpg') center;
}
.object{
  height:100%;
  width:100%;
  background-attachment: fixed;
  background-size:
}
.header{
  height: 600px;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}
.focus{
  background: #FFF;
  height: auto;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}
.experience{
  height: auto;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}
.portfolio{
  background: #FFF;
  height: auto;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}
.about{
  background:#272727;
  height:auto;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}
.contact{
  height: auto;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}
.footer{
  background:#272727;
  height: auto;
  width:100%;
  background-attachment: fixed;
  background-size: cover;
}



/* Layout */

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


/* Navigation Brand */
.navbar-brand{
  font-size: 24px;
}

/* Navigation Bar */
.navbar{
  background: #FFF;
  border-radius: 0px;
}
.navbar-toggle,
.navbar-brand,
.navbar-nav li a {
  height: 76px;
  line-height: 76px;
  padding-top: 0;
  padding-bottom:0;
}

.navbar-nav li a{
  font-size: 16px;
}
.navbar-default .navbar-nav>li>a{
  color:#404040;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
  color:grey;
  background:none;
  border-bottom:2px solid #888;
  height: 60px;
}
.header-text{
  color: #FFF;
}
/* Header container */
.headerContainer{
  margin-top:200px;
  text-align: center;
}
.headerContainer h1{
  font-size: 2.5em;
}
.headerContainer p{
  font-size: 1.2em;
}
.header-text p{
  font-size: 1em;
}
#header{
  padding-top:100px;
  padding-bottom:100px;
}



/* --------------------------------------
  Focus
   -------------------------------------- */
#focus{
  text-align: center;
  padding-top:100px;
  padding-bottom:100px;
}
.focusCollumn{
  padding:25px 0;
}
.focusImg img{
  width:195px;
  height:195px;
  border-radius: 50%;
  border:10px solid grey;
  padding:10px;
  margin-bottom:25px;
  margin-top:35px;
}


/* --------------------------------------
   Experience
   -------------------------------------- */
.color-overlay-experience{
  background: rgba(0, 0, 0, 0.75);
  height: 100%;
}
#experience{
  text-align: center;
  color:#FFF;
}
.experienceText{
  padding:100px;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.experienceText .green-btn{
  margin-top:20px;
}

/* --------------------------------------
   Portfolio
   -------------------------------------- */
  #portfolio{
    padding:100px 0;
    text-align: center;
  }
  #portfolioWebsites img{
    width:100%;
    height: 240px;
    padding:0;
  }
  .noPadding{
    padding:0;
  }

/* --------------------------------------
   About
   -------------------------------------- */
#about{
  padding-top:100px;
  padding-bottom:100px;
  text-align: center;
}
.me img{
  width: 100%;
  height: 100%;
}
/* --------------------------------------
   Contact
   -------------------------------------- */
#contact{
  text-align: center;
  padding-top:100px;
  padding-bottom:100px;
}
.form-control{
  height: 45px;
}
#contact textarea{
  height:215px;/* TEXTAREA TEXTAREA TEXTAREA TEXTAREA TEXTAREA TEXTAREA TEXTAREA TEXTAREA*/
  }
.buttonContact{
  padding:15px 30px;
}
.heading-contact h1{
  font-size:1em;
  color:#FFF;
}
#contact p{
  font-size:0.5em;
  color:#FFF;
}


/* --------------------------------------
   Footer
   -------------------------------------- */
#footer{
  text-align: center;
  padding-top:100px;
  padding-bottom:100px;
  color:#FFF;
}
#footer img{
  height:75px;
  width:75px;
}
.bottom-footer{
  color:#FFF;
  margin-top:40px;
}
#footer .glyphicon-earphone{
  font-size: 60px;
}

/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {



}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {




}

/* Tablet desktop */
@media (min-width:768px) and (max-width:1170px){



}

Hi Konrad,

I am trying to recreate the problem so I can see exactly where the problem is. Please look at this pen. I think I am missing your JavaScript for the nav.

1 Answer

Hi Konrad,

I figured it out. The problem was coming from bootstraps css it assigned a max height to the nav container. You can override the problem with this:

.navbar-collapse.collapse.in{
  max-height:  500px;
  height: 100%;
}

Hope this helps

Konrad Pilch
Konrad Pilch
2,435 Points

Hi,

Thank you very much . Could you tell me how this works ? and why it didnt really work before? i cant get a clear image in my head

When I debugged the code I saw that the nav div was stopping at a max of 340px and then it scrolls. I looked at the code and bootstrap has this rule:

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
  max-height: 340px;
}

you can edit this original rule, but I don't like to edit any framework directly. I think it's best to override things when needed, and that's what the code I posted earlier does for the .collapse.in state of the nav specifically. The reason I set the height on the collapse in state instead of the original navbar is that in the past I've noticed that overriding bootstraps height for original states misses with the animations sometimes.

I hope this clarifies things.

Konrad Pilch
Konrad Pilch
2,435 Points

Um , i get it better now . I didnt see that. I tried to overried it in the chrome tool but it had no effects .

Now i will be sure to read all the code thats there.

I get it now with the max height and % i believe .

Thank you very much ! Really helped me . Im learning how to customise mobile nav coz i dont do it often . usualy i just use the same set .

Glad I could help, let me know if you need anything else. Treehouse lets you ask a member directly when you post your questions, feel free to shoot things my way.

Konrad Pilch
Konrad Pilch
2,435 Points

Thank you ! :) hope not to annoy you : p