Adding drop down menu

I want to add a drop down menu to my technology tab. is it to late to do it?

<!DOCTYPE html>
<html>

<head>
  <!-- Basic -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Mobile Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Site Metas -->
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />

  <title>Capture Ability</title>

  <!-- slider stylesheet -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" />

  <!-- bootstrap core css -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="css/responsive.css" rel="stylesheet" />
</head>

<body>

  <div class="hero_area">
    <!-- header section strats -->
    <header class="header_section">
      <div class="container">
        <nav class="navbar navbar-expand-lg custom_nav-container ">
          <a class="navbar-brand" href="index.html">
           
            
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="s-1"> </span>
            <span class="s-2"> </span>
            <span class="s-3"> </span>
          </button>
<!-- /*navigation starts -->	
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="d-flex ml-auto flex-column flex-lg-row align-items-center">
              <ul class="navbar-nav  ">
                <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">technology</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="service.html">inspirational stories</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.html">Contact </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
	<!-- /*navigation ends -->	
		
    </header>
	  
	  
    <!-- end header section -->
    <!-- slider section -->
    <section class=" slider_section ">
      <div class="container">
        <div class="row">
          <div class="col-md-6 ">
            <div class="detail_box">
              <h1>
                Capture Ability
              </h1>
			  <img src="images/slider-img.jpg" width="428" height="422" alt=""/>
<p>
              It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem
            </p>
              <a href="" class="">
                Contact Us
            </div>
          </div>
          <div class="col-lg-5 col-md-6 offset-lg-1">
            <div class="img_content">
              <div class="img_container">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
					  <! --carousel starts here -->
                    <div class="carousel-item active">
                      <div class="img-box">
                        <img src="images/emily quattrocchi.jpg" alt="">
                      </div>
                    </div>
                    <div class="carousel-item">
                      <div class="img-box">
                        <img src="images/David katz.jpg" alt="">
                      </div>
                    </div>
                    <div class="carousel-item">
                      <div class="img-box">
                        <img src="images/slider-img.jpg" alt="">
                      </div>
                    </div>
					   <! --carousel ends here -->
                  </div>
                </div>
              </div>
               <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="sr-only">Next</span>
              </a>
            </div>

          </div>
        </div>
      </div>
    </section>
    <!-- end slider section -->
  </div>


  <!-- service section -->
  <section class="service_section layout_padding">
    <div class="container">
      <div class="heading_container">
        <h2>
          Our Services
        </h2>
        <img src="images/plug.png" alt="">
      </div>

      <div class="service_container">
        <div class="box">
          <div class="img-box">
            <img src="images/s1.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Equipment installation
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box active">
          <div class="img-box">
            <img src="images/s2.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Windmill Energy
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box">
          <div class="img-box">
            <img src="images/s3.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Equipment Maintenance
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box ">
          <div class="img-box">
            <img src="images/s4.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Offshore Engineering
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
        <div class="box">
          <div class="img-box">
            <img src="images/s5.png" class="img1" alt="">
          </div>
          <div class="detail-box">
            <h5>
              Electrical Wiring
            </h5>
            <p>
              There are many variations of passages of Lorem Ipsum available,
            </p>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <a href="">
          Read More
        </a>
      </div>
    </div>
  </section>
  <!-- end service section -->

  <!-- about section -->
  <section class="about_section layout_padding">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="detail-box">
            <div class="heading_container">
              <h2>
                About Us
              </h2>
              <img src="images/plug.png" alt="">
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit
            </p>
            <a href="">
              Read More
            </a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="img_container">
            <div class="img-box b1">
              <img src="images/about-img1.jpg" alt="" />
            </div>
            <div class="img-box b2">
              <img src="images/about-img2.jpg" alt="" />
            </div>
          </div>

        </div>

      </div>
    </div>
  </section>

  <!-- end about section -->




  <!-- blog section -->

  <section class="blog_section layout_padding">
    <div class="container">
      <div class="heading_container">
        <h2>
          Blog
        </h2>
        <img src="images/plug.png" alt="">
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="box">
            <div class="img-box">
              <img src="images/blog1.jpg" alt="">
            </div>
            <div class="detail-box">
              <h5>
                Blog Title Goes Here
              </h5>
              <p>
                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="box">
            <div class="img-box">
              <img src="images/blog2.jpg" alt="">
            </div>
            <div class="detail-box">
              <h5>
                Blog Title Goes Here
              </h5>
              <p>
                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end blog section -->



  <!-- contact section -->

  <section class="contact_section layout_padding">
    <div class="container ">
      <div class="heading_container">
        <h2>
          Contact Us
        </h2>
        <img src="images/plug.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <form action="">
            <div>
              <input type="text" placeholder="Name" />
            </div>
            <div>
              <input type="email" placeholder="Email" />
            </div>
            <div>
              <input type="text" placeholder="Phone Number" />
            </div>
            <div>
              <input type="text" class="message-box" placeholder="Message" />
            </div>
            <div class="d-flex ">
              <button>
                SEND
              </button>
            </div>
          </form>
        </div>
        <div class="col-md-6">
          <div class="map_container">
            <div class="map-responsive">
              <iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&q=Eiffel+Tower+Paris+France" width="600" height="300" frameborder="0" style="border:0; width: 100%; height:100%" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- end contact section -->


  <!-- info section -->

  <section class="info_section layout_padding">
    <div class="container">
      <div class="info_contact">
        <div class="row">
          <div class="col-md-4">
            <a href="">
              <img src="images/location-white.png" alt="">
              <span>
                Passages of Lorem Ipsum available
              </span>
            </a>
          </div>
          <div class="col-md-4">
            <a href="">
              <img src="images/telephone-white.png" alt="">
              <span>
                Call : +012334567890
              </span>
            </a>
          </div>
          <div class="col-md-4">
            <a href="">
              <img src="images/envelope-white.png" alt="">
              <span>
                demo@gmail.com
              </span>
            </a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8 col-lg-9">
          <div class="info_form">
            <form action="">
              <input type="text" placeholder="Enter your email">
              <button>
                subscribe
              </button>
            </form>
          </div>
        </div>
        <div class="col-md-4 col-lg-3">
          <div class="info_social">
            <div>
              <a href="">
                <img src="images/fb.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/twitter.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/linkedin.png" alt="">
              </a>
            </div>
            <div>
              <a href="">
                <img src="images/instagram.png" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- end info section -->

  <!-- footer section -->
  <footer class="container-fluid footer_section">
    <div class="container">
      <div class="row">
        <div class="col-lg-7 col-md-9 mx-auto">
          <p>
            &copy; 2024 Capture Ability All Rights Reserved</p>

          
        </div>
      </div>
    </div>
  </footer>
  <!-- footer section -->


  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/bootstrap.js"></script>

</body>

</html>
body {
  font-family: "Poppins", sans-serif;
  color: #0c0c0c;
  background-color: #ffffff;
}

.layout_padding {
  padding-top: 90px;
  padding-bottom: 90px;
}

.layout_padding2 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.layout_padding2-top {
  padding-top: 45px;
}

.layout_padding2-bottom {
  padding-bottom: 45px;
}

.layout_padding-top {
  padding-top: 90px;
}

.layout_padding-bottom {
  padding-bottom: 90px;
}

.heading_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.heading_container h2 {
  position: relative;
  font-weight: bold;
  margin-right: 10px;
}

.heading_container img {
  width: 30px;
}

/*header section*/
.hero_area {
  height: 98vh;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ffffff;
}

.sub_page .hero_area {
  height: auto;
}

.header_section .container {
  padding: 0;
}
/*navigatio starts*/
.header_section .nav_container {
  margin: 0 auto;
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 7px 20px;
  margin: 10px 15px;
  color: #000000;
  text-align: center;
  border-radius: 35px;
  text-transform: uppercase;
  font-size: 15px;
}

.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
  background-color: #800020;
  color: #ffffff;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
}

.navbar-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar-brand img {
  margin-right: 5px;
  width: 35px;
}

.navbar-brand span {
  font-size: 22px;
  font-weight: 700;
  color: #800020;
}

.custom_nav-container {
  z-index: 99999;
}

.navbar-expand-lg .navbar-collapse {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.custom_nav-container .navbar-toggler {
  outline: none;
}

.custom_nav-container .navbar-toggler {
  padding: 0;
  width: 37px;
  height: 42px;
}

.custom_nav-container .navbar-toggler span {
  display: block;
  width: 35px;
  height: 4px;
  background-color: #800020;
  margin: 7px 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin: 0;
  margin-bottom: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
  display: none;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin: 0;
  margin-top: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
  -webkit-transform: none;
          transform: none;
}
/*navigation stops*/
/*end header section*/
/* slider section */
.slider_section {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
  color: #3b3a3a;
  padding-bottom: 90px;
}

.slider_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider_section .detail_box {
  color: #000000;
}

.slider_section .detail_box h1 {
  text-transform: uppercase;
  font-weight: bold;
}

.slider_section .detail_box p {
  margin-top: 20px;
}

.slider_section .detail_box a {
  display: inline-block;
  padding: 10px 40px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 35px;
  margin-top: 35px;
}

.slider_section .detail_box a:hover {
  background-color: #800020;
}

.slider_section .img_container {
  border: 7px solid #800020;
  border-radius: 100%;
  overflow: hidden;
}

.slider_section .img_container div#carouselExampleContarols {
  width: 100%;
  position: unset;
}

.slider_section .img_container .img-box img {
  width: 100%;
}

.slider_section .carousel-control-prev,
.slider_section .carousel-control-next {
  top: initial;
  left: initial;
  bottom: 5%;
  right: 10%;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: center;
}

.slider_section .carousel-control-prev {
  background-image: url(../images/prev.png);
  background-color: #ffffff;
  -webkit-transform: translate(-85px, 30px);
          transform: translate(-85px, 30px);
}

.slider_section .carousel-control-next {
  background-image: url(../images/next.png);
  background-color: #800020;
  -webkit-transform: translate(-45px, 0);
          transform: translate(-45px, 0);
}

.service_section {
  text-align: center;
}

.service_section .heading_container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.service_section .service_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 35px 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.service_section .service_container .box {
  margin: 25px 1%;
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
  padding: 35px 25px 25px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  border-top: 15px solid transparent;
  overflow: hidden;
  -webkit-transition: all .1s;
  transition: all .1s;
}

.service_section .service_container .box .img-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 125px;
}

.service_section .service_container .box .img-box img {
  width: 90px;
}

.service_section .service_container .box .detail-box {
  margin-top: 25px;
}

.service_section .service_container .box .detail-box h5 {
  color: #800020;
  font-weight: 600;
  position: relative;
}

.service_section .service_container .box:hover, .service_section .service_container .box.active {
  border-top: 15px solid #800020;
}

.service_section .btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 25px;
}

.service_section .btn-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 35px;
}

.service_section .btn-box a:hover {
  background-color: #800020;
}

.about_section {
  background-color: #f3f0f6;
}

.about_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.about_section .img_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.about_section .img_container .img-box {
  border: 5px solid #800020;
  border-radius: 100%;
  overflow: hidden;
}

.about_section .img_container .img-box.b1 {
  width: 70%;
}

.about_section .img_container .img-box.b2 {
  width: 50%;
  margin-left: auto;
  margin-top: -12%;
}

.about_section .img_container .img-box img {
  width: 100%;
}

.about_section .detail-box {
  margin-right: 15%;
}

.about_section .detail-box p {
  margin-top: 25px;
}

.about_section .detail-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 5px;
  margin: 25px 0 45px 0;
}

.about_section .detail-box a:hover {
  background-color: #800020;
}

.blog_section .heading_container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.blog_section .heading_container h2::before {
  background-color: #ffffff;
}

.blog_section .box {
  margin-top: 55px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.blog_section .box .img-box {
  position: relative;
}

.blog_section .box .img-box img {
  width: 100%;
}

.blog_section .box .detail-box {
  padding: 25px 25px 15px;
}

.blog_section .box .detail-box h5 {
  font-weight: bold;
}

.contact_section {
  position: relative;
}

.contact_section form {
  margin-top: 45px;
  padding-right: 35px;
}

.contact_section input {
  width: 100%;
  border: none;
  height: 50px;
  margin-bottom: 25px;
  padding-left: 25px;
  background-color: transparent;
  outline: none;
  color: #101010;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
}

.contact_section input::-webkit-input-placeholder {
  color: #737272;
}

.contact_section input:-ms-input-placeholder {
  color: #737272;
}

.contact_section input::-ms-input-placeholder {
  color: #737272;
}

.contact_section input::placeholder {
  color: #737272;
}

.contact_section input.message-box {
  height: 120px;
}

.contact_section button {
  border: none;
  display: inline-block;
  padding: 12px 45px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 0px;
  margin-top: 35px;
}

.contact_section button:hover {
  background-color: #800020;
}

.contact_section .map_container {
  height: 100%;
  min-height: 325px;
}

.contact_section .map_container .map-responsive {
  height: 100%;
}

.footer_bg {
  background-image: url(../images/footer-bg.png);
  background-size: cover;
  background-position: top;
}

/* info section */
.info_section {
  background-color: #800020;
  color: #ffffff;
}

.info_section h6 {
  font-weight: bold;
}

.info_section .info_contact {
  margin-top: 60px;
  margin-bottom: 45px;
}

.info_section .info_contact .col-md-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.info_section .info_contact a {
  color: #ffffff;
}

.info_section .info_contact img {
  max-width: 100%;
  margin-right: 10px;
}

.info_section .info_form {
  margin: 0 auto;
  margin-bottom: 45px;
}

.info_section .info_form h4 {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.info_section .info_form form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.info_section .info_form form input {
  background-color: #ffffff;
  border: none;
  -webkit-box-flex: 2.5;
      -ms-flex: 2.5;
          flex: 2.5;
  outline: none;
  color: #000000;
  min-height: 42.4px;
  padding-left: 15px;
}

.info_section .info_form form input ::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form input :-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form input ::-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form input ::placeholder {
  color: #ffffff;
  opacity: 0.2;
}

.info_section .info_form form button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: none;
  display: inline-block;
  padding: 10px 30px;
  background-color: #800020;
  color: #ffffff;
  border-radius: 0;
  font-size: 15px;
  text-transform: uppercase;
}

.info_section .info_form form button:hover {
  background-color: #800020;
}

.info_section .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.info_section .info_social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.info_section .info_social img {
  width: 35px;
  margin-right: 8px;
}

/* end info section */
/* footer section*/
.footer_section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.footer_section p {
  color: #222222;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.footer_section p a {
  color: #222222;
}
/*# sourceMappingURL=style.css.map */

Hey Buddy, Can you please describe your code in more manageable format Please !!

sorry. i thought i put it between the brackets.

Can you please describe your issue within your words please !!

And please do put the piece of code in which you are stuck !!

i want to add a drop dont menu in my navigation. the technology tab.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="d-flex ml-auto flex-column flex-lg-row align-items-center">
              <ul class="navbar-nav  ">
                <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">technology</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="service.html">inspirational stories</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.html">Contact </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
.header_section .nav_container {
margin: 0 auto;
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
padding: 7px 20px;
margin: 10px 15px;
color: #000000;
text-align: center;
border-radius: 35px;
text-transform: uppercase;
font-size: 15px;
}

.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
background-color: #800020;
color: #ffffff;
}

a,
a:hover,
a:focus {
text-decoration: none;
}

a:hover,
a:focus {
color: initial;
}

.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}

.custom_nav-container .nav_search-btn {
background-image: url(…/images/search-icon.png);
background-size: 22px;
background-repeat: no-repeat;
background-position-y: 7px;
width: 35px;
height: 35px;
padding: 0;
border: none;
}

.navbar-brand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.navbar-brand img {
margin-right: 5px;
width: 35px;
}

.navbar-brand span {
font-size: 22px;
font-weight: 700;
color: #800020;
}

.custom_nav-container {
z-index: 99999;
}

.navbar-expand-lg .navbar-collapse {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}

.custom_nav-container .navbar-toggler {
outline: none;
}

.custom_nav-container .navbar-toggler {
padding: 0;
width: 37px;
height: 42px;
}

.custom_nav-container .navbar-toggler span {
display: block;
width: 35px;
height: 4px;
background-color: #800020;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}

.custom_nav-container .navbar-toggler[aria-expanded=“true”] .s-1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0;
margin-bottom: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded=“true”] .s-2 {
display: none;
}

.custom_nav-container .navbar-toggler[aria-expanded=“true”] .s-3 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 0;
margin-top: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded=“false”] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded=“false”] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded=“false”] .s-3 {
-webkit-transform: none;
transform: none;
}

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

Please do follow @Cody_Biggs Sir advice !!

Then I will be able to help you buddy !!

i used </>. did i use them wrong?

You need to use it once for the html and once for the css. However, its fine now

2 Likes

@Cody_Biggs fixed the setup.

1 Like

are you able to guide me with the code?

Hey buddy please do follow the suggestion of @Cody_Biggs Sir

Then I will be able to see your code, Then Only I will be able to help you !!

Hope you understand !!

what are backticks and what do they look like? i’m very confused sorry.

You can do it easily by just updating your <li> element of technology.

See how to do it with examples here:

I assume you want to use Bootstrap since I see it in your project

Your code is properly formatted. Im not sure what the other person is talking about. If I have time today I can take a look

Hi there! I’ve edited your code for readability. To learn about backticks please check the link to the Code formatting guide in @Cody_Biggs’ post
Thanks