Twitter Bootstrap Question posted in

Image and texts not going are not going behind the navigation bar-Twitter bootstrap

I’m making a webpage for my grandpa, and My navigation page is not staying ontop of stuff when I scroll, here is my html:

<!DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>CountrySideBycicling</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
    <script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <!-- logo -->
            <img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="services.html">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contacts.html">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="brands.html.html">Brands</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

      <div class="jumbotron text-center">
<div class="container">
  <div style="height: 25px;"></div>
    <h1>CountrySideBycicling</h1>
    <div style="height: 25px;"></div>
    <p>  Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
       quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
   </p>
   <div style="height: 25px;"></div>
    <button class="btn btn-primary">Read More</button>
</div>
</div>


  <!-- Page Content -->
  <div class="container">

    <!-- Heading Row -->
    <div class="row align-items-center my-5">
      <div class="col-lg-7">
        <img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
      </div>
      <!-- /.col-lg-8 -->
      <div class="col-lg-5">
        <h1 class="font-weight-light">Business Name or Tagline</h1>
        <p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
        <a class="btn btn-primary" href="#">Call to Action!</a>
      </div>
      <!-- /.col-md-4 -->
    </div>
    <!-- /.row -->

    <!-- Call to Action Well -->
    <div class="card text-white bg-secondary my-5 py-4 text-center">
      <div class="card-body">
        <p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
      </div>
    </div>


      <!-- /.col-md-4 -->

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

  </div>
  <!-- /.container -->

  <!-- Content section -->
  <section class="py-5">
    <div class="container">
      <h1>Section Heading</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
    </div>
  </section>

  <!-- Image Section - set the background image for the header in the line below -->
  <section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
    <!-- Put anything you want here! There is just a spacer below for demo purposes! -->
    <div style="height: 200px;"></div>
  </section>

  <!-- Content section -->
  <section class="py-5">
    <div class="container">
      <h1>Section Heading</h1>
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
    </div>
  </section>


        <!-- slider -->
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
              <div class="carousel-item active"></div>
              <div id="target" class="carousel-item"></div>
              <div class="carousel-item"></div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
          </a>
      </div>
      <div style="height: 50px;"></div>



    </div>

</div>

<div class="container">
<!-- Content Row -->
<div class="row">
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card One</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>
  <!-- /.col-md-4 -->
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card Two</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>
  <!-- /.col-md-4 -->
  <div class="col-md-4 mb-5">
    <div class="card h-100">
      <div class="card-body">
        <h2 class="card-title">Card Three</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary btn-sm">More Info</a>
      </div>
    </div>
  </div>

 </div>
</div>


<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">

  <!-- Footer Links -->
  <div class="container text-center text-md-left">

    <!-- Footer links -->
    <div class="row text-center text-md-left mt-3 pb-3">

      <!-- Grid column -->
      <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
        <p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
          consectetur
          adipisicing elit.</p>
      </div>
      <!-- Grid column -->

      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
        <p>
          <a href="#!">Bikesite</a>
        </p>
        <p>
          <a href="#!">Bikesite</a>
        </p>
        <p>
          <a href="#!">Bikesite</a>
        </p>

      </div>

      <!-- Grid column -->

      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
        <p>
          <a href="gallery.html">Gallary</a>
        </p>
        <p>
          <a href="brands.html">Brands</a>
        </p>
        <p>
          <a href="about.html">About</a>
        </p>

      </div>

      <!-- Grid column -->
      <hr class="w-100 clearfix d-md-none">

      <!-- Grid column -->
      <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
        <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
        <p>
          <i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
        <p>
          <i class="fas fa-envelope mr-3"></i> [email protected]</p>
        <p>
          <i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Footer links -->

    <hr>

    <!-- Grid row -->
    <div class="row d-flex align-items-center">

      <!-- Grid column -->
      <div class="col-md-7 col-lg-8">

        <!--Copyright-->
        <p class="text-center text-md-left">© 2020 Copyright:
          <a href="http://www.countrysidebicycling.com/">
            <strong>countrysidebicycling.com</strong>
          </a>
        </p>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-5 col-lg-4 ml-lg-0">

        <!-- Social buttons -->
        <div class="text-center text-md-right">
          <ul class="list-unstyled list-inline">
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-facebook"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-instagram"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-twitter"></span>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-social-icon btn-vk">
                <span class="fa fa-pinterest"></span>
              </a>
            </li>
          </ul>
        </div>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Footer Links -->

</footer>


    <script src="jquery.slim.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Then here is my css( there are other pages, but I just need to know how to do it in this one)

body{
    margin: 0;
    padding: 0;
}

div{
    width: 100%;
    height: 100%;
}
.navbar-default {
    background: none;
}
.navbar{
   position: fixed;
    padding: 10px 0 10px 10px;
    top: 0;
    width: 100%;

  }

  footer{
      background-color:#e6e6e6;
  }

  .jumbotron{
      background-image: url('download.jpeg');
      color: white;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 400px;
      margin-top: 0px;
      margin-bottom: 8px;
  }
  a{
      color:#2e5984;
  }

 .navbar-brand{
     height: 60px;
     width: 100px;
 }


 #aboutusimg{
     background-size: 100%;
        background-image: url(download.jpeg);

        background-repeat:no-repeat;

        height: 400px;
        }


/* slider */

.carousel .carousel-item {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.carousel .carousel-item:first-of-type {
    background-image: url('download.jpeg');
}

.carousel .carousel-item:nth-of-type(2) {
    background-image: url("download.jpeg");
}

.carousel .carousel-item:last-of-type {
    background-image: url("download.jpeg");
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 50px;
    height: 50px;
}


/* partners slider, about page */






/* carousel */

h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */

  .slick-slide {
      margin: 0px 20px;
  }

  .slick-slide img {
      width: 100%;
  }

  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }

  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }

  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }

  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }

  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }

It says that this post is mostly code, please add some more details. but I feel like I have all the details necessary, so I’m just writing random text to see if the problem will go away.

Tags:

2

Answers


  1. 0

    here is what you can do simply to make navigation bar stay on top

    add this code to your .navbar class

    .navbar{
  position:fixed;
  z-index:10;
}

    for simple explanation position: fixed; will make it float on where it is but also not move
    so while it is floating the other element may go over it or behind it, that’s when it comes necessary to put on z-index:10;

    more about z-index
    more about positioning

    Login or Signup to reply.
  2. 0

    The way to do this is to use the z-index property in your CSS. This property defines the stack order of elements. I am sure you want your navbar above all things on the page, so you must stack that on top. You can read more about it at https://www.w3schools.com/cssref/pr_pos_z-index.asp. Here is an example:

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    Your code for the navbar here...
</nav>

<div id="content">
    Your page content here...
</div>

    Then for your CSS:

    .navbar {
    z-index: 99;
}

#content {
    z-index: 1;
}

    This should help, and puts the navbar on top of everything else on the page. You can modify this to your own needs (eg. Some content needs to go above the navbar) but, the general point is that you should use the z-index property to stack items.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search