Responsive navbar collapses but does not display links

Responsive navbar collapses but does not display links
0

#1

Hello, I need some help please.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Contact</title>

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
</head>

<body>
  
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">

    <!--Logo and responsive toggle. This part is for functionality only-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

      <!--Logo or brand-->
      <a class="navbar-brand" href="#"><img src="http://res.cloudinary.com/dnttyski7/image/upload/v1496179914/mic_logo_jm24co.png" alt="logo">
        <span class="glyphicon glyphicon-cars"></span></a>
    </div>

    <!--Navbar Links-->
    <div class="collapse navbar-collapse navbar-right" id="navlinks">
      <ul class="nav navbar-nav">
        <li class="">
          <a href="index.html">Home</a>
        </li>
        <li class="">
          <a href="about.html">About Us</a>
        </li>
        <li role="presentation" class="dropdown">
          <a href="services.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="about-us">
         	<li><a href="services.html">Services</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="repairs.html">Repairs</a></li>
            <li><a href="parts.html">Parts</a></li>
            <li><a href="dismantling.html">Dismantling</a></li>
          </ul>
        </li>

        <li class="">
          <a href="contact.html">Contact Us</a>
        </li>
      </ul>
      <!--Search Button-->
      <form class="navbar-form navbar-right" role="search">
        <div class="input-group add-on">
          <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
        <!--./ End of Search Button-->
      </form>
      <!-- /. End of Navbar-collapse-->
    </div>
    <!-- /. End of container-->
  </div>
  <!-- /. End Navigation-->
</nav>

<div id="top-jumbotron" class="jambotron feature vertical-center">
  <div class="container text-center">
    <h1><span class="glyphicon glyphicon-equlizer">Mick's Motor Repairs and Tyres</span></h1>
    <p>Hassle Free Straight Forward Service!</p>

    <ul class="btnSocial">
      <li>
        <a class="btn" href="#"><i class="fa fa-facebook-square fa-4x" id="faceboonIcon" aria-hidden="true"></i></a>
        <a class="btn" href="#"><i class="fa fa-twitter-square fa-4x" id="twitterIcon" aria-hidden="true"></i></a>
        <a class="btn " href="#"><i class="fa fa-linkedin-square fa-4x" id="linkedinIcon" aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
</div>

<!--Content-->
<div class="container">
  <!--Heading-->
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header text-center">Contact Us</h1>
      <p>It is easy to find us on Burgess Road, we are located on the hedge of McDonald's Restaurant fence. Just follow the alley way and we are only few yeards away. </p>
    </div>
  </div>

  <!--Feature Row-->
  <div class="row">
    <article class="col-md-6 article-intro">
       <!--<h3>Find US</h3>-->
       <div class="container ">
      
       <iframe width="40%" height="375" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJPxq_fOxzdEgRfy-bxvlA-8M&key=AIzaSyAOaqahmVN_gQ7pU58A6xgdoKjaZZYyN8M" allowfullscreen></iframe>
      
      </div>
    </article>
    <article class="col-md-4 article-intro">
    <h3>Our Address:</h3>
        <p>350 Burgess Road</p>
        <p>Southampton</p>
        <p>SO16 3BJ</p>
        <p>Tel: 023 8055 0626</p>
        <p>Tel: 078 6871 9166</p>
        <p>Email Us:&nbsp;<a href="mailto:mickymotorrepairs@gmail.com">mickymotorrepairs@gmail.com</a> </p>
  
    </article>
    
    <article class="col-md-2 article-intro">
    <h3>Opening Hours:</h3>
        <p>Monday&nbsp;9:00-18:00</p>
        <p>Tuesday&nbsp;9:00-18:00</p>
        <p>Wednesday&nbsp;9:00-18:00</p>
        <p>Thutsday&nbsp;9:00-18:00</p>
        <p>Friday&nbsp;9:00-18:00</p>
        <p>Saturday&nbsp;9:00-12:00</p>
  
    </article>
    
  </div>
  
  </div>
  <!--/. End of content-->
</div>

<footer>
  <div class="footer-blurb">
    <div class="container">
      <div class="row">
        <div class="col-sm-4 fotter-blurb-item">
          <h3><spanclass="glyphicon glyphicon-fire"></span> A garage you can trust</h3>
          <p>When your car needs to be repaired you can trust us to fix your problem. Your needs come first. You can decide whether it's the price, garage location or other users' recommendations that give you a peace of mind when it comes to choosing the
            garage for your job.</p>
        </div>

        <div class="col-sm-4 fotter-blurb-item">
          <h3><spanclass="glyphicon glyphicon-fire"></span>Honest Service</h3>
          <p>Finding a garage you trust can be difficult. It's easy to take your car in with a flat tyre and come out with a massive bill for brakes you never asked to be repaired. You'll never get that with us. We will always inform you first of the problem
            and offer you the best course of action before starting working on your car.</p>
        </div>

        <div class="col-sm-4 fotter-blurb-item">
          <h3><spanclass="glyphicon glyphicon-fire"></span>Honest Price</h3>
          <p>We know that keeping a car on the road can be challenging and costly and we want to help you enjoy driving, without the hassle of finding a garage you can trust. At Mick's Motor Repairs we are completely transparent about our pricing, so there
            are no hidden charges or nasty shocks. The estimate we give you will always include parts and labour.</p>
        </div>
      </div>

      <!--/. End of row-->
    </div>
  </div>

  <!--Copyright -->
  <div class="small-print">
    <div class="container">

      <p class="text-center">Designed by <a href="#" target="_blank">TechFuturae IT</a></p>
      <p class="text-center">Copyright &copy; Alain Ndabala 2017</p>

    </div>
  </div>
</footer>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBH7ONWqqWggb-uSAvZ7dqcAwSOrhrd5b0&callback=initMap"
  type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-2.2.1.js" integrity="sha256-eNcUzO3jsv0XlJLveFEkbB8bA7/CroNpNVk3XpmnwHc=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/index.js"></script>
  
  

  
</body>
</html>

CSS file

body {
  padding-top: 50px;
  color: #959595;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
}

.feature {
  background-color: #6A0E0E;
  color: white;
}

.article-intro {
  margin-bottom: 25px;
}

/* Start Toggle */
 
 .toggle {
    width: 30px;
    padding: 10px;
    float: right;
    background-color: #00BCD4;
    border-radius: 10px;
    margin: 6px;
    cursor: pointer;
    display: none;
 }
 
 .toggle span {
    width: 100%;
    height: 4px;
    background-color: #fff;
    display: block;
    margin-bottom: 3px;
 }
 /* End Toggle */



.footer-blurb {
  padding: 30px 0;
  background-color: yellowgreen;
  color: black;
}

.footer-blurb-item {
  padding: 30px;
}

.small-print {
  background-color: #fff;
  padding: 30px 0;
}


/* line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height  */

.navbar .navbar-brand {
  height: 80px;
}

.navbar .nav>li>a {
  padding-top: 30px;
  padding-bottom: 10px;
}

.navbar .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}

.navbar .navbar-form {
  padding-top: 16px;
  padding-bottom: 10px;
}

.nav.navbar-nav li a {
  /*padding-left: 70px;
padding-right: 40px;*/
  font-size: 1.2em;
}

#top-jumbotron {
  padding: 60px;
  font-size: 1.5em;
}

#top-jumbotron h1 {
  font-size: 2em;
  font-weight: bold;
}


/* resizing nav brand image*/

.navbar-brand>img {
  max-height: 100%;
  height: 100%;
  margin: 0 auto;
}

.btnSocial{
  color: #337ab7;
  font-size: 2em;
  margin-top: 0.45em;
  list-style-type: none;
}


/*carousel*/

.carousel{
    background: #2f4357;
    margin-top: 20px;
	margin-bottom:10px;
}
.carousel .item{
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */

}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */

}
.bs-example{
	margin: 20px;
}

.carousel-fullscreen .carousel-caption {
    top: 50%;  
    bottom: auto;
    -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);
}



#2

The problem is in your id names.

You’ve given your collapsed navigation bar a different id than the one you are targetting in your collapse toggle.The data-target in your button is looking for an id to target. It’s looking for #navbar. However, you’ve given your menu the id=“navlinks”.

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
  ...
 <div class="collapse navbar-collapse navbar-right" id="navlinks">

If you change the id to “navbar” in both it will work.

cheers,
Ali


#3

Aldek, you are a star! All working fine and thank you very much. I couldn’t figure out what was wrong, it was that simple…


#4

Very glad to hear it’s working!