Navbar won't stick

Question

Trying to get my navbar to stick, can anyone see any problems with my code?

Code is being taken directly from my server.

<!DOCTYPE html>
<html>
  <head>
    <title>Bus company</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width">
  </head>
  <body> 
    <header id="top" class="main-header">
      <div class="cbp-af-header">
    <div class="cbp-af-inner">
      <h1>Drive 25</h1>
        <nav>
          <a href="#top" class="button">Home</a>
          <a href="#about" class="button">About</a>
          <a href="#" class="button">Pears</a>
          <a href="#" class="button">Oranges</a>
        </nav>
     </div>
      </div>
      <!-- <span class="title">Hire a Minibus</span>
      <h1>Drive25 Minibus</h1>
      <img class="arrow" src="img/arrow.svg" alt="Down arrow">
      <div <!--class="nav-menu">
        <!--<h6>Home<img src="img/menu.png" alt="Menu Icon"></h6>
        <nav>
      <ul>
            <li class="selected button"><a href="#top">Home</a></li>
            <li class="button "><a href="#about">About</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>



    <!----->
    </header>
        <div class="primary-content t-border" id="about">
            <p class="intro">
                Drive25 minibus is the leading bus hire company in Hemel Hempstead, Watford, North London and Hertfordshire. We offer services from weddings, funerals, birthdays, airport transfers to nights out and corporate events. With a variety of vehicles available to choose from we won't disappoint.
            </p>
            <a id="callout" class="button" href="#prices">Find out more about pricing</a>

      <div class="wildlife">
        <h2>Our Vehicles</h2>
        <p>
          We have a wide variety of vehicles available to hire varying in sizes, from 5 seater vehicles to 16 seater vehicles like our <a href="#eight" class="button">8 seater</a>, <a href="#sixteen" class="button">16 seater</a>, and <a href="#twenty" class="button">20 seater</a>.
        </p>
      </div><!-- End .wildlife -->

            <a id="callouttwo" class="button" href="#taxis">Find out about our chauffeuring and taxi services</a> <!-- and link to other site when done -->
        </div><!-- End .primary-content -->

        <div class="secondary-content t-border group" id="prices" alt="hire">

      <h3>Pricing</h3>
      <p>
        All of our vehicles are inspected regularly and are able to provide you with an enjoyable night or day out if wanted, with a variety of vehicles we have a variety of prices depending on the service and the time and duration of the event. Our fleet is currently expanding and more vehicles are on the way, so contact us even if we don't have the right vehicle for you yet, we're sure we'll have one on the way perfect for you!
      </p>

      <div class="pricing" id="pricing">
        <img src="http://web16216.vs.speednames.com/New%20Images%209-9-09/Mercedes%20Sprinter%2016%20seat.JPG" alt="Pricing">
        <h3 id="sixteen">16 Seater</h3>
        <p>
          We have one 16 seater vehicle which provides comfort that cannot be beaten by anything its size ensuring a comfortable ride no matter the distance. If you wish to hire this vehicle <a href="#contact" class="button">contact us</a> for a quote!
        </p>
      </div>

      <div class="tips">
        <img src="https://i.ytimg.com/vi/hPm_Oa20CbQ/maxresdefault.jpg" alt="Mountain Landscape">
        <h3 id="eight">8 Seater</h3>
        <p>
          Our 8 seater provides comfort that cannot be beaten by anything its size ensuring a comfortable ride no matter the distance and is perfect for group outings or a group airport transfer. If you wish to hire this vehicle <a href="#contact" class="button">contact us</a> for a quote!
        </p>
      </div>

      <div class="pricing2">
        <img src="http://www.mercedes-benz.co.uk/content/media_library/hq/hq_mpc_reference_site/bus_ng/new_busses/models/model_navi_flyout_2_0/modelnavigation_sprinter2.object-Single-MEDIA.tmp/Modelnavigation_Sprinter_Travel_Euro6_960x298_10-2013_2.jpg" alt="Mountain Landscape">
        <h3 id="twenty">20 Seater</h3>
        <p>
          We have a 20 seater vehicle which can transport large groups comfortably no matter when or where you're going, we can ensure a preimum transportation to your destination. If you wish to hire this vehicle <a href="#contact" class="button">contact us</a> for a quote!
        </p>

        <h3>Where can we take you?</h3>
        <p>We can help you with transportation for events like Weddings, Race Days, Wimbledon or just airport transfers; quotes will depend on the time you want to travel, <a href="#contact" class="button">contact us</a> for a quote!</p>
      </div>

      <div id="slideshow">
        <div>
          <img src="img/City.jpg">
        </div>
        <div>
          <img src="img/airport.jpg">
        </div>
        <div>
          <img src="img/Wimbledon.jpg">
        </div>
        <div>
          <img src="img/silverstone.jpg">
        </div>
        <div>
          <img src="img/Wedding.jpg">
        </div>
        <div>
          <img src="img/ascot.jpg">
        </div>
      </div>
        </div><!-- End .secondary-content -->

    <div class="contact-content" id="contact">
      <h3>Contact & Bookings</h3>
      <p>If you want to contact us for information or to book a vehicle you can:
      <ul>
        <li>Email: <a href="mailto:sales@drive25.co.uk">sales@drive25.co.uk</a> or <a href="mailto:bookings@drive25.co.uk">bookings@drive25.co.uk</a></li>
        <li>Phone: <a href="tel:01442250000">01442250000</a>
      </ul>
    </div>

        <footer class="main-footer">
            <p>All rights reserved to Bus Company.</p>
            <a href="#top" class="button">Back to top &raquo;</a>
        </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

/* Web Fonts -------------------- */

@font-face {
  font-family: 'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}

/* Base Styles -------------------- */

* {
  box-sizing: border-box;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,
h2 {
  font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;

}

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  text-shadow: 5px 8px 10px rgba(0,0,0, .8);
  margin: 12px 0 0;
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
}

ul,
ol {
  margin: 30px 0;
}

li {
  margin-bottom: 10px;
}

/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

/* Main Styles --------------------- */
/* firebrick is a mad color*/

.image-shown {
  display: inline-block;
}

.image-hidden {
  display: none;
}

.main-header {
  padding-top: 170px;
  height: 850px;

  background: #ffa949 url('https://i.ytimg.com/vi/wZ9P-Z1Eaeo/maxresdefault.jpg') no-repeat center;
  background-size: cover;
}

.info-header {
  padding-top: 170px;
  height: 850px;

  background: #ffa949 url('https://i.ytimg.com/vi/hPm_Oa20CbQ/maxresdefault.jpg') no-repeat center; /* use logo */
  background-size: cover;
}

/*
.main-header {
  padding-top: 170px;
  height: 850px;
  background: #ffa949 url('../img/mountains.jpg') no-repeat center;
  background: #ffa949 url('https://scontent-lhr3-1.xx.fbcdn.net/t31.0-8/q84/p843x403/13701119_1574765192818224_3846454193420810570_o.jpg') no-repeat center;
  background-size: cover;
  background-image: https://scontent-lhr3-1.xx.fbcdn.net/t31.0-8/q84/p843x403/13701119_1574765192818224_3846454193420810570_o.jpg
    linear-gradient(180deg, #0099ff, #99d6ff);
}
*/

.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
  letter-spacing: .065em;
  font-weight: 200;
  border-bottom: 2px solid;
  padding-bottom: 10px;
}

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

.primary-content,
.main-header,
.info-header,
.main-footer,
.info-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content,
.contact-content {
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

#callout,
#callouttwo {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer,
.info-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 10px solid #ffa949;
}

.info-footer {
  border-bottom: 2px solid #dfe2e6
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.primary-content, 
.secondary-content,
.contact-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

.wildlife {
  color: white;
  text-align: center;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  background: #434a52 url('http://auto-cuby.co.uk/autocuby/wp-content/uploads/mercedes-benz-sprinter-tourist-line-minibus-24-seaters-14.jpg') no-repeat center;
  background-size: cover;
  box-shadow: 15px 15px 10px rgba(0,0,0, .8);   /* horizontal, vertical, blur, color */
  /* border-radius: 50px 10px 50px 10px;   top left,topright, bottom right, bottom left */

  /* for round circle add height and width attrs and set to the same value */

  border-radius: 10px;
}

.arrow {
  width: 50px;
  margin-top: 150px;
}

/* Floated Columns ------------------ */

.pricing,
.tips {
  width: 46.5%;
}

.tips {
  float: left;
}

.pricing {
  float: right;
}

/* Float Clearfix ------------------ */

.group:after {
  content: "";
  display: table;
  clear: both;
}

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

@media (max-width: 1024px) {
  .primary-content,
  .secondary-content,
  .contact-content {
    width: 90%;
  }
  .wildlife {
    padding: 10% 12%;
    margin: 50px 0 20px;
  }
}

@media (max-width: 768px) {
  .primary-content,
  .secondary-content,
  .contact-content {
    width: 100%;
    padding: 20px;
    border-top: none;
  }
  .main-header{
      max-height: 380px;
      padding: 50px 25px 0;
  }
  .info-header{
      max-height: 380px;
      padding: 50px 25px 0;
  }
  .title {
    font-size: 1.3rem;
    border: none;
  }
  h1{
    font-size: 5rem;
    line-height: 1.1;
  }
  .arrow{
    display: none;
  }
  .intro{
    font-size: 1rem;
  }
  .pricing,
  .tips {
    float: none;
    width: 100%;
  }
  .main-footer,
  .info-footer {
    padding: 10px 0;
  }
}

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 

}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: -50px; 
    right: -50px; 
    bottom: 10px; 
}


/* Navigation */
/* nav ul {
  margin: 0.75rem auto;
  font-weight: 500;
}

nav ul li {
  width: 100%;
  margin: 0.75rem auto;
  padding: 0.75rem 0;
  border-radius: 5px;
  background: light-grey;
}

.selected,
nav ul li:hover {
  background: grey;
}

nav a {
  display: block;
  width: 100%;
}

/* Mobile Navigation Slider */
.nav-menu h6 {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  text-align: left;
  background: light-grey;
  border-radius: 5px;
}

.nav-menu img {
  float: right;
  height: 1.125rem;
}

.nav-menu {
  margin: 0.75rem 0;
}

*/

/* added */

.cbp-af-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;
    z-index: 10000;
    height: 230px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}

.cbp-af-header .cbp-af-inner {
    width: 90%;
    max-width: 69em;
    margin: 0 auto;
    padding: 0 1.875em;
}

.cbp-af-header h1,
.cbp-af-header nav {
    display: inline-block;
    position: relative;
}

 /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1,
.cbp-af-header nav a {
    line-height: 230px;
}

.cbp-af-header h1 {
    text-transform: uppercase;
    color: #333;
    letter-spacing: 4px;
    font-size: 4em;
    margin: 0;
    float: left;
}

.cbp-af-header nav {
    float: right;
}

.cbp-af-header nav a {
    color: #aaa;
    font-weight: 700;
    margin: 0 0 0 20px;
    font-size: 1.4em;
}

.cbp-af-header nav a:hover {
    color: #333;
}

/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.cbp-af-header.cbp-af-header-shrink {
    height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
    line-height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
    font-size: 2em;
}

/* Example Media Queries */
@media screen and (max-width: 55em) {

    .cbp-af-header .cbp-af-inner {
        width: 100%;
    }

    .cbp-af-header h1,
    .cbp-af-header nav {
        display: block;
        margin: 0 auto;
        text-align: center;
        float: none;
    }

    .cbp-af-header h1,
    .cbp-af-header nav a {
        line-height: 115px;
    }

    .cbp-af-header nav a {
        margin: 0 10px;
    }

    .cbp-af-header.cbp-af-header-shrink h1,
    .cbp-af-header.cbp-af-header-shrink nav a {
        line-height: 45px;
    }

    .cbp-af-header.cbp-af-header-shrink h1 {
        font-size: 2em;
    }

    .cbp-af-header.cbp-af-header-shrink nav a {
        font-size: 1em;
    }
}

@media screen and (max-width: 32.25em) {
    .cbp-af-header nav a {
        font-size: 1em;
    }
}

@media screen and (max-width: 24em) {
    .cbp-af-header nav a,
    .cbp-af-header.cbp-af-header-shrink nav a {
        line-height: 1;
    }
}

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);


$(".button").click(function() {
    var addressValue = $(this).attr("href");
    $('html, body').animate({
        scrollTop: $(addressValue).offset().top
    }, 2000);
});


//$(".nav-menu h6").click(function() {
//  $(this).next().slideToggle(400);
//});

var cbpAnimatedHeader = (function() {

    var docElem = document.documentElement,
        header = document.querySelector( '.cbp-af-header' ),
        didScroll = false,
        changeHeaderOn = 300;

    function init() {
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }

    function scrollPage() {
        var sy = scrollY();
        if ( sy >= changeHeaderOn ) {
            classie.add( header, 'cbp-af-header-shrink' );
        }
        else {
            classie.remove( header, 'cbp-af-header-shrink' );
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();

Answer 1 · 2016-12-28T00:45:27Z

December 28, 2016 12:45am

I tried this change in the CSS:

/*.cbp-af-header h1,*/
.cbp-af-header nav {
    display: inline-block;
    position: fixed;
}

.cbp-af-header h1 {
    position: fixed;
}

And it seemed to work.

Welcome to the Treehouse Community

Looking to learn something new?

Josh Keenan

Josh Keenan

Navbar won't stick

1 Answer

apalm

apalm