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

Posted March 13, 2015 10:24pm by

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.

March 13, 2015 11:11pm

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

March 13, 2015 11:17pm

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){



}

March 13, 2015 11:30pm

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

March 13, 2015 11:40pm

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

March 14, 2015 12:00am

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

March 14, 2015 12:09am

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.

March 14, 2015 12:17am

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 .

March 14, 2015 12:20am

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.

March 14, 2015 12:29am

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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Konrad Pilch

Konrad Pilch

Mobile nav

Ali M Malik

Ali M Malik

Konrad Pilch

Konrad Pilch

Ali M Malik

Ali M Malik

1 Answer

Ali M Malik

Ali M Malik

Konrad Pilch

Konrad Pilch

Ali M Malik

Ali M Malik

Konrad Pilch

Konrad Pilch

Ali M Malik

Ali M Malik

Konrad Pilch

Konrad Pilch