Trying to add a new element to the navigation bar and a new page to a website [Can't find the error]

Question

I am re-using a Twitter Bootstrap theme in order to create a website. I am a beginner in web design and I know this might sound trivial. I am trying to add a new page to my navigation bar. So apart from About and Home I am trying to add a blog page. In order to do that I have added all the according spreadsheets css to the right html and I uploaded my new pages accordingly via FTP but it doesn't work!

I think I have done everything correctly but for some reason it doesn't work and I can't seem to make it work!

The website is www.hoodoopro.com

Any help would be more than welcome!

 .page-marketing-standard { } /* .page-marketing-standard .heading { font-size: 40px; font-size: 2.182rem; line-height: 1.042; } */ .page-marketing-standard .heading + h2 { font-size: 1.6rem; } @media ( min-width: 480px ) { .page-marketing-standard .heading + h2 { font-size: 2.182rem; } } .hero-careers { position: relative; padding: 0; height: auto; border-bottom: 1px solid #dfe0e1; background: #fff; color: inherit; } /* adjust hero height with header and adjusted for border-bottom */ @media ( min-width: 992px ) { .hero-careers { height: 80%; /* height: calc(100% - 135px); */ min-height: 590px; max-height: 800px; } } @media ( min-width: 1200px ) { .hero-careers { height: calc(100% - 145px); max-height: 800px; } } @media ( min-width: 1320px ) { .hero-careers { height: calc(100% - 154px); } } .hero-careers > .container { padding-top: 30px; padding-bottom: 185px; background: url("../img/hero.jpg") 140px 100% no-repeat; background-size: 240px; } @media ( min-width: 400px ) { .hero-careers > .container { background-position: 100% 100%; padding-bottom: 200px; } } @media ( min-width: 568px ) { .hero-careers > .container { background-position: 100% 100%; background-size: 50%; } } @media ( min-width: 768px ) { .hero-careers > .container { padding-top: 50px; background-size: 46%; background-position: 100% 100%; } } @media ( min-width: 992px ) { .hero-careers > .container { padding-top: 0; padding-bottom: 0; background-size: 55%; background-position: 100% 100%; } } @media ( min-width: 1200px ) { .hero-careers > .container { background-size: contain; background-position: 100% 30px; } } @media ( min-width: 768px ) { .hero-careers h1 span { white-space: nowrap; } } @media ( max-width: 767px ) { .hero-careers p { max-width: 280px; } } @media ( max-width: 767px ) { .hero-careers .v-align-parent { max-width: 600px; margin-left: 0; } } @media ( min-width: 768px ) and ( max-height: 849px ), (max-width: 767px ) and ( max-height: 520px ) { .page-careers .hint-arrow-contrast { position: fixed; } } /* carousel slides */ .carousel-item { height: 0; padding-bottom: 75%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } @media ( min-width: 568px ) { .carousel-item { padding-bottom: 62.5%; } } @media ( min-width: 768px ) { .carousel-item { padding-bottom: 50%; } } @media ( min-width: 1690px ) { .carousel-item { height: 840px; padding-bottom: 0; } } .active .carousel-item { } /* listings */ .level-careers-overview { padding-bottom: 0; } .vacancy-profile { max-width: 280px; -webkit-transform: translateX(30px); transform: translateX(30px); } @media ( min-width: 768px ) { .vacancy-profile { max-width: 100%; } } @media ( min-width: 992px ) { .vacancy-profile { position: relative; margin-top: -80px; -webkit-transform: translateX(60px); transform: translateX(60px); z-index: -1; } } @media ( min-width: 768px ) and ( max-width: 991px ) { .level-careers-overview .inline-tabs { display: block; } } .level-careers-overview blockquote { margin: 0 0 2em; font-style: italic; color: #2a2a2a; } .level-careers-overview blockquote p { margin-bottom: 20px; } @media ( min-width: 768px ) { .level-careers-overview blockquote p { margin-bottom: 30px; } } .level-careers-overview blockquote p:before { content: '\\201C'; font-style: normal; } .level-careers-overview blockquote p:after { position: relative; content: '\\201D'; vertical-align: baseline; } @media ( min-width: 768px ) { .level-careers-overview blockquote p:before { margin-left: -.9em; padding-right: .5em; } .level-careers-overview blockquote p:after { padding-left: .4em; top: 1ex; } } .level-careers-overview cite { display: block; opacity: .3; font-weight: 700; font-style: normal; font-size: 14px; text-transform: uppercase; } @media ( max-width: 767px ) { .level-career-listings { padding-bottom: 60px; } } .level-career-listings .inline-tabs { display: block; } .level-career-listings .post.active, .level-career-listings .post .entry { padding-bottom: 20px; border-bottom: 1px solid #f6f6f6; } /* individual job posts */ .level-career-listings .post .entry { margin-bottom: 20px; } @media ( min-width: 992px ) { .level-career-listings .post .entry { margin-bottom: 40px; } } .level-career-listings .post .entry:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; } 

 wor<!DOCTYPE html> <!--[if lte IE 9]><html class="no-js is-ie"><![endif]--> <!--[if gt IE 8]><!--><html class=no-js><!--<![endif]--> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>News</title> <link rel=stylesheet href="css/main.css"> <link rel=stylesheet href="css/owl.carousel.css"> <link rel=stylesheet href="css/about.css"> <link rel=stylesheet href="css/blog.css"> <!--[if lte IE 8]> <link rel=stylesheet href="css/ie.css"> <![endif]--> <script src="js/vendor/modernizr.js"></script> <script src="js/vendor/respond.min.js"></script> </head> <body class="page-careers"> <div class="header"> <div class="container rel text-left"> <a class="brand brand-color" href="index.html"></a> <nav class=nav> <ul> <li><a href="index.html">Home</a> <li class="active"><a href="about.html">About</a> <li class="active"><a href="blog.html">Blog</a> </ul> </nav> </div> </div> <div class="level level-hero hero-careers has-hint"> <div class="container full-height"> <div class="v-align-parent"> <div class="v-center"> <div class="row"> <div class="col-sm-6 col-md-5"> <h1 class="mb-30 xs-mb-10 scaled"><span>We are Product Experts.</span> <br class="hidden-sm"> Your product is our priority</h1> <p class="mb-30 xs-mb-20">We are a team of experienced Product Managers educated in Berkeley and Stanford, some of us ex-Consultants, that want to work on innovative products. We want to put our expertise in use for the most challenging startups. <p><a class="btn btn-prepend btn-shadow btn-scroll" href="#"> <i class="prepended icon-arrow-down"></i><span class="btn-txt">Learn More</span> </a> </div> </div> </div> </div> </div> <div class="hint-arrow hint-arrow-contrast"></div> </div> <div class="level no-border"> <div class="container"> <div class="row"> <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3"> <h1 class="mb-25 sm-mb-20 heading scaled color-dark heading-bordered bordered-above">It is time to give a startup a change</h1> <h2 class="text-center w-300 color-dark mb-70 sm-mb-40 xs-mb-20">Who are we?</h2> </div> </div> <div class="row mb-60 xs-mb-20"> <div class="col-sm-6 col-lg-4 col-lg-offset-2 xs-mb-20"> <div class="has-icon"> <!-- <i class="icon icon-laptop"></i --> <h3 class="mb-25 md-mb-10">Chantal Marin</h3> <p class="smaller">Co-founder.Serial Entrepreneur.Co-founder @Letsapp @Weeleo @DroneAdventures @GymLess. MsC CS at UCL. BS EECS at UC Berkeley. See more at: https://uk.linkedin.com/in/chantalmarin </div> </div> <div class="col-sm-6 col-lg-4"> <div class="has-icon"> <!--<i class="icon icon-phone"></i> --> <h3 class="mb-25 md-mb-10">Marily Nika</h3> <p class="smaller"></p>PM @Google. PhD of Computer Science at Imperial College in London. </div> </div> </div> <div class="row xs-mb-20"> <div class="col-sm-6 col-lg-4 col-lg-offset-2 xs-mb-20"> <div class="has-icon"> <!--<i class="icon icon-flame"></i> --> <h3 class="mb-25 md-mb-10">Marc Molins</h3> <p class="smaller"></p>Product Manager at Rocket Internet. Serial Entrepreneur. BS in Telecom engineering. See more at: https://es.linkedin.com/in/marcmolinsgracia/en </div> </div> <div class="col-sm-6 col-lg-4"> <div class="has-icon"> <!-- <i class="icon icon-camera"></i> --> <h3 class="mb-25 md-mb-10"></h3> <p class="smaller"></p> </div> </div> </div> </div> </div> <div class="carousel"> <div class="carousel-item" style="background-image: url('img/slide-1.jpg')"> </div> <div class="carousel-item" style="background-image: url('img/slide-3.jpg')"> </div> <div class="carousel-item" style="background-image: url('img/slide-2.jpg')"> </div> </div> <div class="level"> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <img src="img/ceo.jpg" width="90%"> </div> <div class="col-md-6"> <h2>Conquer your fears as some of our happy clients say. </h2> <br/> <br/> <blockquote> Don't wait for your product to be left behind. </blockquote> <p></p> </div> </div> </div> </div> <div class="footer text-center"> <p> <a href="index.html">hoodoopro.com</a> | January 2016 </p> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\\/script>')</script> <!-- //-beg- concat_js --> <script src="js/vendor/owl.carousel.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script src="js/main.js"></script> <!-- //-end- concat_js --> <script> (function(){ var windowWidth = function() { var e = window, a = 'inner'; if ( !( 'innerWidth' in window ) ) { a = 'client'; e = document.documentElement || document.body; } return e[ a+'Width' ]; } var carouselPadding = function() { var limit = 1690; if ( Modernizr.mq("( min-width: " + limit + "px ) ") ) { padding = Math.round( ( windowWidth() - limit ) / 2 ); } else { padding = 0; } return padding; }; var owl = $(".carousel"); owl.owlCarousel({ items : 1, loop : true, // margin : 10, nav : false, dots : true, responsive : { 0 : { stagePadding : 0 }, 1690 : { stagePadding : carouselPadding(), margin : 30 }, } }); $('.owl-item:not(".active")').on('click', function(e) { if ( $(this).next().is('.active') ) { owl.trigger('next.owl.carousel'); } else { owl.trigger('prev.owl.carousel'); } }); }()); </script> </body> </html> 

Thank you ] 1

Answer 1

Basically you have to find where the HTML of the navigation is and add a new anchor tag ( <a> ) that directs to the blog page.

<a href="blog.html">Blog</a>

---

index.html

Find the following code:

<p class="fmenu">
   <a href="index.html">HOME</a> | <a href="about.html">ABOUT</a>
</p>

Replace with:

<p class="fmenu">
   <a href="index.html">HOME</a> | <a href="about.html">ABOUT</a> | <a href="blog.html">BLOG</a>
</p>

---

about.html

Find the following code:

<nav class="nav">
   <ul>
      <li><a href="index.html">Home</a></li>
      <li class="active"><a href="about.html">About</a></li>
   </ul>
</nav>

Replace with:

<nav class="nav">
   <ul>
      <li><a href="index.html">Home</a></li>
      <li class="active"><a href="about.html">About</a></li>
      <li><a href="blog.html">Blog</a></li>
   </ul>
</nav>