Navigate to a div section on same page not working properly?

Question

fix header overlaps with page anchor - I have a top bar containing 5 links that redirects to a div on a click on the same page, but whenever I clicked on the link it redirects to the exact same div but in the middle of the divs content not at the starting position also div content went under the header I guess?

PS: I have checked these solutions from StackOverflow but no outcome!

P.S Page is so big so I have shown little code to produce the output so, it is not formatted well.. for full webpage and output please check the working page too

    WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    document.getElementById("bar").style.top = "90px";
  } else {
    document.getElementById("bar").style.top = "150px";
  }
}

.main-navigation-top {
  position: fixed;
  top: 0px;
  background: #fff;
  z-index: 999999;
  width: 100%;
}
 

.about-inner {
  position: relative;
  top: 90px;
}

.pg-content .container-fluid {
  padding: 60px;
}

.pg-bar .container-fluid {
  padding: 0px 60px;
}

.sub-nav {
  background: #FC453E;
  padding: 10px;
}

.pg-bar {
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 2;
}

.scrollbar-colored {
  scrollbar-color: #eee;
}


/* .pg-bar ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: auto;
} */

.d-flex {
  display: flex;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.w-100 {
  width: 100% !important;
}

.sub-nav {
  display: block;
  width: auto;
}

.sub-nav dl {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}

.sub-nav>dl {
  white-space: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
}

.sub-nav dd {
  display: inline-block;
  margin-bottom: 0px;
}

.sub-nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.pg-bar li a {
  color: #fff;
  text-decoration: none;
}

.pg-content {
  padding: 100px 0px;
}

.pg-btn {
  padding: 8px 10px;
  border: none;
  background: #FC453E;
  color: #fff;
  border-radius: 2px;
  font-size: 20px;
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.pg-content h6 {
  color: #FC453E;
  font-size: 18px;
}

.home-content span {
  color: #FC453E;
  font-family: 'Poppins';
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: #FC453E;
}

.nav-tabs .nav-link {
  color: #000;
  background-color: #eee;
  border-radius: 0px;
  padding: 8px 40px;
}

.col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.flug-i i {
  font-size: 30px;
  color: #FC453E;
}

.flug-i h4 {
  margin-bottom: 0px;
  text-transform: uppercase;
  margin-left: 10px;
  font-family: 'Poppins';
  margin-top: 0px;
  font-size: 24px;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.flug-cont {
  margin-left: 40px;
}

.flug-cont i {
  color: #eab177;
  position: relative;
  top: 3px;
}

.die {
  padding: 20px;
  background: #eee;
}

.ter h5 {
  text-transform: uppercase;
  font-family: poppins;
  font-size: 20px;
}

.ter td {
  font-family: poppins;
  font-size: 14px;
}

.ter .table thead th {
  border-bottom: 2px solid #fff;
}

.ter .table td,
.table th {
  border-top: 1px solid #fff;
}

.ter tbody tr {
  background: #eee;
}

.star {
  position: relative;
  background: #eee;
  padding: 15px 20px;
}

.star i {
  position: absolute;
  content: '';
  top: -12px;
  color: #FC453E;
  font-size: 25px;
  left: 0px
}

.name {
  padding: 10px;
  background: #eeeeee;
}

.more {
  color: #FC453E;
  border: 1px solid #FC453E;
  background: transparent;
  padding: 5px 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}

.resie i {
  position: relative;
  top: 3px;
  color: #FC453E;
}

html {
  scroll-behavior: smooth;
}

.nav-tabs>li>a {
  border-radius: 0px;
}

.nav-tabs>li>a {
  margin-right: 5px;
}


/* nav-tab */

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

.tab-content {
  padding: 0px;
  box-shadow: none;
}

.panel-body {
  padding: 0px;
}

.panel-group .panel+.panel {
  margin-top: 0px;
}

.panel-group .panel {
  border-bottom: 1px solid #fc453e;
  border-radius: 0px;
  cursor: pointer;
}


/********************************************************************/


/*** PANEL DEFAULT ***/

.with-nav-tabs.panel-default .nav-tabs>li>a,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>.open>a,
.with-nav-tabs.panel-default .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-default .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
  background-color: #ddd;
  border-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #fc453e;
  border-color: #ddd;
  border-bottom-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  border-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
  background-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
  color: #fff;
  background-color: #555;
}

<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!---------- Main Header code starts here--------->
<div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;">
    <div class="row">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <img src="../img/menu-bar.png" width="78">
                </button>
                <a class="navbar-brand" href="/index.html"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> 
                        <div class="clearfix"></div>
                    </li>
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a>
                        <ul class="dropdown-menu" style="display: none;">
                            <div class="container">
                                <div class="col-lg-3">
                                    <h3>Äthiopien</h3>
                                </div> 
                    </li>
                  
                  
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> 
               
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

<!---------- Top Bar navigation with 5 links to div code starts here--------->

<section class="pg-bar" id="bar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-8 col-sm-12">
        <div class="sub-nav">
          <dl class="scrollbar-colored">
            <dd><a href="#Home">Reise</a></dd>
            <dd><a href="#About">Reiseroute</a></dd>
            <dd><a href="#Service">Programm</a></dd>
            <dd><a href="#Carrer">Leistungen</a></dd>
            <dd><a href="#Contact">Termine & Preise</a></dd>

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


<!---------- content for 5 links to div code starts here--------->

<section class="pg-content">

  <!-- this line will also changed start here -->
  <div class="container-fluid">
    <!--change end here  -->
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <div class="home-content" id="Home">
              <h1 class="text-uppercase">Äthiopien Intensiv</h1>
              <button class="mt-2 pg-btn">Studienreise Äthiopien</button>
              <button class="ml-2 mt-2 pg-btn">24 Tage</button>
              <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren
                erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen.
              </p>
              <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben
                sind. Neue Abenteuer warten auf Sie!</p>

              <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p>
              </div>

              <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p>
              </div>

            </div>

          </div>

          <div class="col-lg-4">
            <img src="image/bctontour.png" class="img img-responsive">
          </div>
          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button>
          </div>
          <div class="col-lg-12 mt-5">
            <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive">
          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button>
            </div>

          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>FLÜGE</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p>
            </div>
         
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Hotel</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland):
              </p>
            </div>
          
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">1 Übernachtung in Hawassa</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Arba Minch</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Turmi</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4 class="text-wrap">VERPFLEGUNG</h4>

            </div>
            
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
             
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Ethnologisches Museum Addis Abeba</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Nordäthiopien entdecken</h4> 
            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Blaue Nil Fälle</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Debreh Libanos Kloster</p>
            </div>
          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Süden Äthiopiens</h4>

            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Mago Nationalpark</p>
            </div>

          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>ABC Pluspunkte</h4>

            </div>
 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Informationsmaterial</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Auslandskrankenversicherung</p>
            </div>

          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button>
            </div>

</section>

@Cervuscamelopardalis yes I have resolved by doing some css style — Utsav Upadhyay, May 31 '22 at 11:31

score 1 · Accepted Answer · answered May 30 '22 at 15:26

Indeed the the header is scrolled to the top of the page and hidden under the navbars. You can set a scroll-margin-top on the headings you are scrolling to, e.g. scroll-margin-top: 16rem.

In your code that would for instance be here:

<button class="w-100 text-uppercase font-weight-bolder pg-btn checking" id="About" style="scroll-margin-top: 16rem;">Reiseroute</button>

Just add that to the class you are using to style the heading (pg-btn?). Change the 16rem to a value that is working for you.

Lajos Arpad · Answer 2 · 2022-05-30T14:50:16.267

You can simply:

display: flex;

on that item.

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
    document.getElementById("bar").style.top = "90px";
  } else {
    document.getElementById("bar").style.top = "150px";
  }
}

.main-navigation-top {
  position: fixed;
  top: 0px;
  background: #fff;
  z-index: 999999;
  width: 100%;
}
 

.about-inner {
  position: relative;
  top: 90px;
}

.pg-content .container-fluid {
  padding: 60px;
}

.pg-bar .container-fluid {
  padding: 0px 60px;
}

.sub-nav {
  background: #FC453E;
  padding: 10px;
}

.pg-bar {
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 2;
}

.scrollbar-colored {
  scrollbar-color: #eee;
}


/* .pg-bar ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    margin-bottom: 0px;
    overflow: auto;
} */

.d-flex {
  display: flex;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.ml-3 {
  margin-left: 1rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.w-100 {
  width: 100% !important;
}

.sub-nav {
  display: block;
  width: auto;
}

.sub-nav dl {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}

.sub-nav>dl {
  white-space: nowrap;
  margin-bottom: 0;
  overflow-x: auto;
}

.sub-nav dd {
  display: inline-block;
  margin-bottom: 0px;
}

.sub-nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.pg-bar li a {
  color: #fff;
  text-decoration: none;
}

.pg-content {
  padding: 100px 0px;
}

.pg-btn {
  padding: 8px 10px;
  border: none;
  background: #FC453E;
  color: #fff;
  border-radius: 2px;
  font-size: 20px;
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.pg-content h6 {
  color: #FC453E;
  font-size: 18px;
}

.home-content span {
  color: #FC453E;
  font-family: 'Poppins';
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #fff;
  background-color: #FC453E;
}

.nav-tabs .nav-link {
  color: #000;
  background-color: #eee;
  border-radius: 0px;
  padding: 8px 40px;
}

.col-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.flug-i i {
  font-size: 30px;
  color: #FC453E;
}

.flug-i h4 {
  margin-bottom: 0px;
  text-transform: uppercase;
  margin-left: 10px;
  font-family: 'Poppins';
  margin-top: 0px;
  font-size: 24px;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.flug-cont {
  margin-left: 40px;
}

.flug-cont i {
  color: #eab177;
  position: relative;
  top: 3px;
}

.die {
  padding: 20px;
  background: #eee;
}

.ter h5 {
  text-transform: uppercase;
  font-family: poppins;
  font-size: 20px;
}

.ter td {
  font-family: poppins;
  font-size: 14px;
}

.ter .table thead th {
  border-bottom: 2px solid #fff;
}

.ter .table td,
.table th {
  border-top: 1px solid #fff;
}

.ter tbody tr {
  background: #eee;
}

.star {
  position: relative;
  background: #eee;
  padding: 15px 20px;
}

.star i {
  position: absolute;
  content: '';
  top: -12px;
  color: #FC453E;
  font-size: 25px;
  left: 0px
}

.name {
  padding: 10px;
  background: #eeeeee;
}

.more {
  color: #FC453E;
  border: 1px solid #FC453E;
  background: transparent;
  padding: 5px 15px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
}

.resie i {
  position: relative;
  top: 3px;
  color: #FC453E;
}

html {
  scroll-behavior: smooth;
}

.nav-tabs>li>a {
  border-radius: 0px;
}

.nav-tabs>li>a {
  margin-right: 5px;
}


/* nav-tab */

.panel.with-nav-tabs .nav-tabs {
  border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
  margin-bottom: -1px;
}

.tab-content {
  padding: 0px;
  box-shadow: none;
}

.panel-body {
  padding: 0px;
}

.panel-group .panel+.panel {
  margin-top: 0px;
}

.panel-group .panel {
  border-bottom: 1px solid #fc453e;
  border-radius: 0px;
  cursor: pointer;
}


/********************************************************************/


/*** PANEL DEFAULT ***/

.with-nav-tabs.panel-default .nav-tabs>li>a,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>.open>a,
.with-nav-tabs.panel-default .nav-tabs>.open>a:hover,
.with-nav-tabs.panel-default .nav-tabs>.open>a:focus,
.with-nav-tabs.panel-default .nav-tabs>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li>a:focus {
  color: #777;
  background-color: #ddd;
  border-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #fc453e;
  border-color: #ddd;
  border-bottom-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu {
  background-color: #f5f5f5;
  border-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a {
  color: #777;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus {
  background-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover,
.with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus {
  color: #fff;
  background-color: #555;
}

<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!---------- Main Header code starts here--------->
<div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;">
    <div class="row">
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <img src="../img/menu-bar.png" width="78">
                </button>
                <a class="navbar-brand" href="/index.html" style="display: flex;"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> 
                        <div class="clearfix"></div>
                    </li>
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a>
                        <ul class="dropdown-menu" style="display: none;">
                            <div class="container">
                                <div class="col-lg-3">
                                    <h3>Äthiopien</h3>
                                </div> 
                    </li>
                  
                  
                    <li class="dropdown megamenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> 
               
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

<!---------- Top Bar navigation with 5 links to div code starts here--------->

<section class="pg-bar" id="bar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-8 col-sm-12">
        <div class="sub-nav">
          <dl class="scrollbar-colored">
            <dd><a href="#Home">Reise</a></dd>
            <dd><a href="#About">Reiseroute</a></dd>
            <dd><a href="#Service">Programm</a></dd>
            <dd><a href="#Carrer">Leistungen</a></dd>
            <dd><a href="#Contact">Termine & Preise</a></dd>

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


<!---------- content for 5 links to div code starts here--------->

<section class="pg-content">

  <!-- this line will also changed start here -->
  <div class="container-fluid">
    <!--change end here  -->
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-8">
            <div class="home-content" id="Home">
              <h1 class="text-uppercase">Äthiopien Intensiv</h1>
              <button class="mt-2 pg-btn">Studienreise Äthiopien</button>
              <button class="ml-2 mt-2 pg-btn">24 Tage</button>
              <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren
                erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen.
              </p>
              <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben
                sind. Neue Abenteuer warten auf Sie!</p>

              <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p>
              </div>

              <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p>
              </div>
              <div class="resie d-flex">
                <i class="fas fa-check-circle"></i>
                <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p>
              </div>

            </div>

          </div>

          <div class="col-lg-4">
            <img src="image/bctontour.png" class="img img-responsive">
          </div>
          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button>
          </div>
          <div class="col-lg-12 mt-5">
            <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive">
          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button>
            </div>

          <div class="col-lg-12 mt-5">
            <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>FLÜGE</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p>
            </div>
         
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Hotel</h4>

            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland):
              </p>
            </div>
          
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">1 Übernachtung in Hawassa</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Arba Minch</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">2 Übernachtungen in Turmi</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4 class="text-wrap">VERPFLEGUNG</h4>

            </div>
            
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
             
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Ethnologisches Museum Addis Abeba</p>
            </div>
          </div>
          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Nordäthiopien entdecken</h4> 
            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Blaue Nil Fälle</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Debreh Libanos Kloster</p>
            </div>
          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>Süden Äthiopiens</h4>

            </div> 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Mago Nationalpark</p>
            </div>

          </div>

          <div class="col-lg-6 mt-5">
            <div class="flug-i d-flex">
              <i class="fas fa-check-circle"></i>
              <h4>ABC Pluspunkte</h4>

            </div>
 
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Informationsmaterial</p>
            </div>
            <div class="flug-cont d-flex">
              <i class="fal fa-angle-right"></i>
              <p class="ml-1">Auslandskrankenversicherung</p>
            </div>

          </div>
          
           <div class="col-lg-12 mt-5">
              <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button>
            </div>

</section>

@UtsavUpadhyay excuse me, I forgot to add it to the answer. It is the link — Lajos Arpad, May 30 '22 at 14:04
@UtsavUpadhyay Edited my answer and now it works. The relevant line is ` BCT-Touristik Äthiopien Studienreisen` — Lajos Arpad, May 30 '22 at 14:04
`display:flex;` not working you can check on live [website](https://www.die-aethiopienreise.de/task/index.php) too. — Utsav Upadhyay, May 30 '22 at 14:48
@UtsavUpadhyay have you tested my fiddle? Was it working? If not, how did it not work? I have also attached a screenshot of your site. — Lajos Arpad, May 30 '22 at 14:51
see I Have added your [code](https://imgur.com/a/HbO89dv) the `display: flex;` also it resulted in bad design in [header](https://imgur.com/a/FSSARGC) — Utsav Upadhyay, May 30 '22 at 15:08
@UtsavUpadhyay what would be a good design? Can you specify? — Lajos Arpad, May 30 '22 at 15:13
I mean the existing design of the header is impaired, did you check my screenshot ? also, have you put this `display: flex` code in code with inspect element just to check is it working right or not? — Utsav Upadhyay, May 30 '22 at 15:22
@UtsavUpadhyay I checked your screenshots, but I'm not an artist, so I strongly prefer to see an exact definition of what the intention is. So, I will ask you again: can you specify the exact problem? The "design of the header is impaired" is too vague to a non-artist such as myself. — Lajos Arpad, May 30 '22 at 15:29
when I put `display: flex;` it is not working at all and afterward the header design like logo and menus shrink a bit! — Utsav Upadhyay, May 30 '22 at 15:34
@UtsavUpadhyay we are not understanding each-other. Can you provide a screenshot of how it should look like and how it is looking alike now? That would provide a factual difference rather than statements I cannot understand, such as "it is not working at all" or "menus shrink a bit". I have 0 feel for design, so please do not appeal to my nonexistent artistic intuition, but I can code a solution for you if I understand the problem. — Lajos Arpad, May 30 '22 at 15:36
@UtsavUpadhyay also, it is unclear to me whether you have tested the snippet I have provided at all and whether it was bad as well. Can you answer this question as well? Thanks! — Lajos Arpad, May 30 '22 at 15:37
whole story short, please just open the inspect element on my webpage and add your code `display:flex` and see the difference — Utsav Upadhyay, May 30 '22 at 15:40

Navigate to a div section on same page not working properly?

2 Answers2