Content stuck to navbar-Twitter bootstrap

Simasan
October 12, 2020
99 views
3 votes
3 Answers

Photo of the page
I have my website’s content somehow stuck to the navigation menu. I have tried putting it in a different div but nothing has worked for me so far, neither replacing the placing of the container class. I dont understand why the body’s main content wont align underneath the navigational menu and be in its own section so that it doesn’t leak out. Any help would be greatly appreciated.

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: calc(100vw - 20px);
  min-height: 100vh;

}

body {
  width: 100%;
  overflow-x: hidden;
}


#container {
  min-height: 100%;
  position: relative;
  width: 100%;
}

main {
  margin-left: 100px;
}

/*
     html {
      display: block;
    }
    /*
    
     /* SCROLL BAR CSS STARTS */
body::-webkit-scrollbar {
  width: 0.30rem;
}

body::-webkit-scrollbar-track {
  background: #212429;
}

body::-webkit-scrollbar-thumb {
  background: #fc3218;
}

/* SCROLL BAR CSS ENDS */


/* NAV BAR CSS STARTS */

.logo {
  margin-right: 5px;
}

.my-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.navbar-light .navbar-nav .nav-link {
  color: white;
}

.navbar-nav>li {
  padding-left: 35px;
  padding-right: 55px;
  float: none;
  display: table-cell;
  text-align: center;
  font-size: 14px;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: #fc3218;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:active {
  color: #fc3218;
}


.navbar {
  margin-top: 0px;
  margin-left: 10px;
  width: 100%;
  background: #22252a;
}

.dropdown-menu {
  color: white;
  background-color: #fc3218;
}

.dropdown-item {
  color: white;
  font-size: 12px;
}

/* NAV BAR CSS END */

/* SIDEBAR CSS STARTS */

.lateral-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background: #fafafc;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

img {
  width: 60px;
  height: 45px;
  margin-top: 3px;
}

.lateral-nav a {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  margin: 5px 0;
}



.socialbox {
  position: fixed;
  display: inline-block;
  top: 50%;
  left: 0;
  width: 80px;
  height: auto;
  margin: -120px 0 0;
  text-align: center;

}

.socialbox img {
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 5px;
  margin: 4px;
  box-sizing: border-box;
}


.socialbox::before {
  content: "#Suivez-nous";
  bottom: -180px;
  left: -38px;
  width: 150px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  color: #000f33;
  transform: rotate(-90deg);
}

.socialbox::after {
  content: "";
  bottom: -105px;
  left: 50%;
  width: 1px;
  height: 110px;
  margin: 0 0 0 -2px;
  background-color: #dddee4;
}

.socialbox::after,
.socialbox::before {
  position: absolute;
  display: inline-block;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.socialbox .fa {
  font-size: 20px;
  color: #000f33;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

/* SIDEBAR CSS ENDS */

/* CARD DECK START */
.card-deck {
  width: 90%;
  margin: auto;
}

/* CARD DECK END */

/* Footer start */

footer {
  background: #16222A;
  background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
  background: linear-gradient(59deg, #3A6073, #16222A);
  color: white;
  width: calc(100% - 85px);
  margin-left: 100px;
  margin-right: -15px;
}


footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #FA944B;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}

/* Footer social icons */

ul.social-network {
  list-style: none;
  display: inline;
  margin-left: 0 !important;
  padding: 0;
}

ul.social-network li {
  display: inline;
  margin: 0 5px;
}

.social-network a.icoFacebook:hover {
  background-color: #3B5998;
}

.social-network a.icoLinkedin:hover {
  background-color: #007bb7;
}

.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
  color: #fff;
}

.social-network a.socialIcon:hover,
.socialHoverClass {
  color: #44BCDD;
}

.social-circle li a {
  display: inline-block;
  position: relative;
  margin: 0 auto 0 auto;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.social-circle li i {
  margin: 0;
  line-height: 30px;
  text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.social-circle i {
  color: #595959;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-network a {
  background-color: #F9F9F9;
}

/* Footer end */

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/carousel/">
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="normalize.css">

  <!-- Bootstrap core CSS -->
  <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Hello, world!</title>
</head>

<body>
  <div id="container">
    <!-- Navigation menu -->
    <header>
      <nav class="my-nav navbar navbar-light navbar-expand-lg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarsExample08"
          aria-controls="navbarsExample08" aria-expanded="false" aria- label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria- haspopup="true"
                aria-expanded="false">ACTIVITES</a>
              <div class="dropdown-menu" aria-labelledby="dropdown08">
                <a class="dropdown-item" href="#">Rafting</a>
                <a class="dropdown-item" href="#">Canooing</a>
                <a class="dropdown-item" href="#">Parachute</a>
                <a class="dropdown-item" href="#">Soufflerie</a>
                <a class="dropdown-item" href="#">Saut elastique</a>
              </div>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">OFFRES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">EVENEMENTS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">A PROPOS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">ESPACE HANDICAP</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a>
            </li>
          </ul>
        </div>
      </nav>

    </header>
    <!-- Navigation menu -->

    <!-- Sidebar menu -->
    <div class="lateral-nav position-fixed">
      <a href="#"><img class="logo" src="./img/so.png" alt=""></a>
      <div class="socialbox ">
        <a href="#"><img class="fa fa-facebook" src="./img/facebook.png" alt=""></a>
        <a href="#"><img class="fa fa-twitter" src="./img/twitter.png" alt=""></a>
        <a href="#"><img class="fa fa-youtube" src="./img/youtube.png" alt=""></a>
      </div>
    </div>
    <!-- Sidebar menu -->

    <!-- Website Content -->
    <main>
      <section>
        <!-- NOS ACTIVITES START -->
        <h2 class="text-center">NOS ACTIVITES</h2>
        <div class="card-deck ">
          <div class="card text-center" style="width: 18rem;">
            <div class="card-body rafting">
              <h5 class="card-title">RAFTING</h5>
              <a href="#" class="btn btn-primary">RÉSERVEZ</a>
            </div>
          </div>
          <div class="card text-center" style="width: 18rem; height: 15rem;">
            <div class="card-body canooing">
              <h5 class="card-title">CANNOING</h5>
              <a href="#" class="btn btn-primary">RÉSERVEZ</a>
            </div>
          </div>
          <div class="card text-center" style="width: 18rem;">
            <div class="card-body parachute">
              <h5 class="card-title">PARACHUTE</h5>
              <a href="#" class="btn btn-primary">RÉSERVEZ</a>
            </div>
          </div>
          <div class="card text-center" style="width: 18rem;">
            <div class="card-body soufflerie">
              <h5 class="card-title">SOUFFLERIE</h5>
              <a href="#" class="btn btn-primary">RÉSERVEZ</a>
            </div>
          </div>
          <div class="card text-center" style="width: 18rem;">
            <div class="card-body saut-elastique">
              <h5 class="card-title">SAUT ELASTIQUE</h5>
              <a href="#" class="btn btn-primary">RÉSERVEZ</a>
            </div>
          </div>
        </div>

        <!-- NOS ACTIVITES END -->
      </section>
    </main>



  </div>
  <!-- Footer Start -->
  <footer class="mainfooter" role="contentinfo">
    <div class="footer-middle">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <!--Column1-->
            <div class="footer-pad">
              <h4>Heading 1</h4>
              <ul class="list-unstyled">
                <li><a href="#"></a></li>
                <li><a href="#">Payment Center</a></li>
                <li><a href="#">Contact Directory</a></li>
                <li><a href="#">Forms</a></li>
                <li><a href="#">News and Updates</a></li>
                <li><a href="#">FAQs</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <!--Column1-->
            <div class="footer-pad">
              <h4>Heading 2</h4>
              <ul class="list-unstyled">
                <li><a href="#">Website Tutorial</a></li>
                <li><a href="#">Accessibility</a></li>
                <li><a href="#">Disclaimer</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">FAQs</a></li>
                <li><a href="#">Webmaster</a></li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <!--Column1-->
            <div class="footer-pad">
              <h4>Heading 3</h4>
              <ul class="list-unstyled">
                <li><a href="#">Parks and Recreation</a></li>
                <li><a href="#">Public Works</a></li>
                <li><a href="#">Police Department</a></li>
                <li><a href="#">Fire</a></li>
                <li><a href="#">Mayor and City Council</a></li>
                <li>
                  <a href="#"></a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3">
            <h4>Follow Us</h4>
            <ul class="social-network social-circle">
              <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 copy">
            <p class="text-center">&copy; Copyright 2018 - Company Name. All rights reserved.</p>
          </div>
        </div>


      </div>
    </div>
  </footer>
  <!-- Footer Ends -->
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
  </script>
</body>

</html>

Answers

- HardikYewale
- October 12, 2020 at 3:47 pm
- 0 votes
0
You can add padding to the top of the div which contains the card deck :
```
.card-deck {
  width: 90%;
  margin: auto;
  padding-top:50px;
}
```
for the heading to move down edit this part in HTML file:
```
<h2 style="padding-top:40px;" class="text-center">NOS ACTIVITES</h2>
```
Login or Signup to reply.

- NoncomissionedRush
- October 12, 2020 at 3:53 pm
- 0 votes
0
This is because of the position: absolute on .my-nav element. Just remove that or change it to relative and you should be good

Login or Signup to reply.

- macadox
- October 12, 2020 at 4:06 pm
- 0 votes
0
Why do you use position: absolute for the my-nav? What position: absolute or fixed does, it pulls out the element (my-nav) from the document context. If you check this and debug in your browser, you can see that the header has height equal to 0.

In order to fix the card-deck layout, just simply remove the position absolute.
If you want the menu, to be visible when you scroll down the page, consider putting position: sticky on the header.

like:
```
      header {
        position: sticky; 
        top: 0; // need to apply top and left for position sticky to work
        left: 0;
        z-index: 5; // z-index, so it is at the top
      }
      
      .my-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
      }
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.