Home > Blockchain >  Active nav link is not shown at the correct section because of header offset
Active nav link is not shown at the correct section because of header offset

Time：02-17

In this below example I have got two issues.

1 - Active nav link is not shown at the correct section when clicked on a nav link because of header offset calculation, I think it assumes it is not reached to the designated section, you have to scroll header height more manually than active link background color highlights.

2 - During scrolling highlight passes by each link and creates unpleasant effects for example when you are in the Amenities section and click on Contact to reach to contact section.

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".nav li");
window.addEventListener("scroll", () => {
  let current = "";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((li) => {
    li.classList.remove("active-link");
    if (li.classList.contains(current)) {
      li.classList.add("active-link");
    }
  });
});

/*Menu Toggle*/
$(".menu-toggle").click(function() {
  $(".nav").toggleClass("nav--open", 500);
  $(".overlay").toggleClass("showOverlay");
  $(this).toggleClass("open");
});

$(".overlay").click(function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

$(".nav a").on("click", function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

/*Smooth Scrolling*/
// Get the height of the header for offsetting
var headerHeight = $(".header-container").height();

// Attach the click event
$('.nav-link').bind("click", function(e) {

  var target = $(this).attr("href"); //Get the target
  var scrollToPosition = $(target).offset().top - headerHeight;

  $('html').animate({
    'scrollTop': scrollToPosition
  }, 900, function(target) {
    window.location.hash = target;
  });

  e.preventDefault();
});
<!--Back To Top Script-->
window.addEventListener('scroll', function() {
  var scroll = document.querySelector('.scrollTop');
  scroll.classList.toggle("active", window.scrollY > 500)
})

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}


/*My Special Menu*/

html {
  overflow-x: hidden;
}

.header-container {
  background: -webkit-linear-gradient(left, #7abff6 0%, #03a9f4 100%);
  color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.container {
  /*width: 95%;
     max-width: 1000px;
    */
  width: 90%;
  max-width: 1600px;
  height: 84.4px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo__text {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  padding: 18px;
}

.logo__text span {
  font-weight: 400;
  margin-left: 6px;
}

.logo__text1 {
  font-size: 13px;
  padding-left: 220px;
}

.logo__text1 h3 {
  font-weight: 300;
}


/*a.nav-link.availability-button {
            color: #ffffff !important;
            border-width: 0px !important;
            letter-spacing: 1.5px;
            font-size: 14px;
            font-weight: 700 !important;
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }

        a.nav-link.availability-button:hover {
            -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }*/

.nav a.active {
  color: #fff;
}

.nav {
  position: absolute;
  background: #fff;
  -webkit-clip-path: circle(0px at top right);
  clip-path: circle(0px at top right);
  transition: -webkit-clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms, -webkit-clip-path ease-in-out 700ms;
}

.nav--open {
  -webkit-clip-path: circle(250% at top right);
  clip-path: circle(250% at top right);
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  border-bottom: 1px solid #575766;
  border-left: 1px solid #575766;
  border-right: 1px solid #575766;
}

.nav li:last-child {
  border-bottom: none;
}

@media screen and (max-width: 1240px) {
  /*.nav li:last-child {
                display: none;
            }*/
}

@media screen and (min-width: 1200px) {
  .check-button {
    display: none !important;
  }
}

.nav-link {
  color: #000;
  font-size: 14px;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  outline: none;
}


/*.nav-link:hover,
        .nav-link:focus {
            background: #74d057;
            color: #fff;
        }*/

.nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1em;
  width: 1.1em;
  text-align: right;
  /*color: #000;*/
}

i.fas.fa-home.nav--icon {
  color: #552401;
}

i.far.fa-image.nav--icon {
  color: #9a57d8;
}

i.fas.fa-bed.nav--icon {
  color: #ef991f;
}

i.far.fa-thumbs-up.nav--icon {
  color: #5912d0;
}

i.fas.fa-sun.nav--icon {
  color: #f2da08;
}

i.fas.fa-envelope.nav--icon {
  color: #0a2fa0;
}

.menu-toggle {
  padding: 1em;
  padding-right: 50px;
  position: absolute;
  top: 1em;
  right: -25px;
  cursor: pointer;
  z-index: 3;
}

@media only screen and (min-width: 480px) {
  .menu-toggle {
    top: 1.6em;
  }
}

@media only screen and (max-width: 479px) {
  .container {
    height: 70px;
  }
  .menu-toggle {
    top: 1.2em;
  }
  .nav {
    top: 70px !important;
  }
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: #fff;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  -webkit-transition: all ease-in-out 500ms;
  -o-transition: all ease-in-out 500ms;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.hamburger::after {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

.open .hamburger {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  -webkit-transform: translateY(-3px) rotate(-90deg);
  -ms-transform: translateY(-3px) rotate(-90deg);
  transform: translateY(-3px) rotate(-90deg);
}

@media only screen and (max-width: 982px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
  .nav-link:hover,
  .nav-link:focus {
    background: #74d057;
    color: #fff;
  }
}

@media only screen and (max-width: 602px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (max-width: 480px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (min-width: 983px) {
  .menu-toggle {
    display: none;
  }
  .nav {
    height: auto;
    position: relative;
    background: transparent;
    clip-path: initial;
    -webkit-clip-path: initial;
  }
  .nav li {
    display: inline-block;
    border: none;
  }
  .nav a {
    padding: 0.5em;
    /*margin-left: 1em;*/
    color: #fff;
  }
  .nav-item {
    position: relative;
  }
  .nav-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #edbb5f;
    transition: all 0.5s ease-in-out;
    z-index: -1;
  }
  .nav-item:hover:before {
    width: 100%;
  }
  nav ul li.active-link {
    background: #edbb5f;
  }
  /*.nav a:hover,
            .nav a:focus {
                background: #edbb5f;
                padding: 7px;
            }*/
  .nav--icon {
    display: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .nav a {
    padding: 1.3em 2.5em 1.3em 1em;
  }
  .logo__text {
    padding: 18px 18px 18px 0;
    font-size: 22px;
    margin-left: 0;
  }
  .container {
    max-width: 480px;
  }
}

@media only screen and (max-width: 361px) {
  .logo__text {
    font-size: 20px;
  }
  .logo__text1 {
    font-size: 10px;
  }
}


/*End My Special Menu*/

.section-header-area {
  background: url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/villa-blueview-bg02.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 10px;
}

@media only screen and (max-width: 767px) {
  .section-header-area {}
}

.section-header {
  text-align: center;
}

.section-header h2 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 44px;
  color: #565656 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

.section-header h2 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(left, #1e83ec 0%, #f6653c 100%);
}

strong {
  font-weight: 700;
}

.section-header h3 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 1.6vw;
  color: #767676 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

@media only screen and (max-width: 980px) {
  .section-header h2 {
    font-size: 44px;
  }
  .section-header h3 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .section-header h2 {
    font-size: 34px;
  }
  .section-header h3 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 620px) {
  .section-header h2 {
    font-size: 28px;
  }
}


/*Back To Top*/

.scrollTop {
  position: fixed;
  bottom: 800px;
  right: 23px;
  width: 50px;
  height: 50px;
  background: #399cf1 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  border-radius: 50%;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

.scrollTop.active {
  bottom: 100px;
  visibility: visible;
  opacity: 1;
}

.scrollTop:hover {
  background: #66b5f8 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.showOverlay {
  display: block;
}

@media only screen and (min-width: 983px) {
  /*to stop overlay coming into screen on desktop when clicked on menu links otherwise it brings overlay layer on top of sections then it needs to be clicked on to make it dissappear */
  .showOverlay {
    display: none;
  }
}

.hero-area {
  height: 800px;
  background-color: blanchedalmond;
}

.info-blurbs {
  height: 800px;
  background-color: red;
}

.container-grid-masonry {
  height: 700px;
  background-color: yellow;
}

.container-rooms {
  height: 700px;
  background-color: green;
}

.container-reviews {
  height: 700px;
  background-color: pink;
}

.container-activities {
  height: 700px;
  background-color: #ddd;
}

.container-contact {
  height: 1200px;
  background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  onclick="scrollToTop();"></div>
<div >
  <div >
    <div >V&#304;lla<span>Mav&#304; Manzara</span>
      <div >
        <h3>KA&#350; / ANTALYA</h3>
      </div>
    </div>
    <div ></div>
    <nav >
      <ul >
        <li ><a  href="#amenities"><i ></i>Amenities</a></li>
        <li ><a  href="#gallery"><i ></i>Gallery</a></li>
        <li ><a  href="#rooms"><i ></i>Rooms</a></li>
        <li ><a  href="#reviews"><i ></i>Reviews</a></li>
        <li ><a  href="#activities"><i ></i>Activities</a></li>
        <li ><a  href="#contact"><i ></i>Contact</a></li>
        <!--<li ><a  href="https://www.airbnb.com/rooms/18783099">Check Availability</a></li>-->
      </ul>
    </nav>
    <div >
      <div ></div>
    </div>
  </div>
</div>
<div ></div>
<!--Amenities Text--->
<section id="amenities" >
  <div >
    <h2><strong>Amenities</strong> Villa Mavi Manzara</h2>
  </div>
</section>
<!--Amenities Blurbs--->
<div >1</div>
<!--Gallery Text--->
<section id="gallery" >
  <div >
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
</section>
<!--Gallery--->
<div >2</div>
<!--Room Details Text--->
<section id="rooms" >
  <div >
    <h2><strong>Room</strong> Details</h2>
  </div>
</section>
<!--Rooms-->
<div >3</div>
<!--Review Text--->
<section id="reviews" >
  <div >
    <h2><strong>Reviews</strong> Villa Mavi Manzara</h2>
  </div>
</section>
<!--Reviews-->
<div >4</div>
<!--Activities Text--->
<section id="activities" >
  <div >
    <h2><strong>Activities</strong> Villa Mavi Manzara</h2>
  </div>
</section>
<!--Activities-->
<div >5</div>
<!--Contact Text--->
<section id="contact" >
  <div >
    <h2><strong>Contact</strong> Us</h2>
  </div>
</section>
<!--Contact Section-->
<div >6</div>

CodePudding user response：

I spent some time debugging your JS but didn't find anything that stuck out to me. Then I started looking at your HTML and realized the <div>'s you have between each section are throwing off your anchor tags, making the start of the sections not display when clicking the nav-items. Therefore making them seem "offset".

Without additional JS, you can fix this by nesting those <div>'s within each respective section.

For example ~ you had this:

<!--Gallery Text--->
<section id="gallery" >
  <div >
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
</section>
<!--Gallery--->
<div >2</div>
<!-- div should be nested within section to not throw off anchor -->

Which should be this:

<!--Gallery Text--->
<section id="gallery" >
  <div >
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
  <!--Gallery--->
  <div >2</div>
</section>

See it working here:

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".nav li");
window.addEventListener("scroll", () => {
  let current = "";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((li) => {
    li.classList.remove("active-link");
    if (li.classList.contains(current)) {
      li.classList.add("active-link");
    }
  });
});

/*Menu Toggle*/
$(".menu-toggle").click(function() {
  $(".nav").toggleClass("nav--open", 500);
  $(".overlay").toggleClass("showOverlay");
  $(this).toggleClass("open");
});

$(".overlay").click(function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

$(".nav a").on("click", function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

/*Smooth Scrolling*/
// Get the height of the header for offsetting
var headerHeight = $(".header-container").height();

// Attach the click event
$('.nav-link').bind("click", function(e) {

  var target = $(this).attr("href"); //Get the target
  var scrollToPosition = $(target).offset().top - headerHeight;

  $('html').animate({
    'scrollTop': scrollToPosition
  }, 900, function(target) {
    window.location.hash = target;
  });

  e.preventDefault();
});
<!--Back To Top Script-->
window.addEventListener('scroll', function() {
  var scroll = document.querySelector('.scrollTop');
  scroll.classList.toggle("active", window.scrollY > 500)
})

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}


/*My Special Menu*/

html {
  overflow-x: hidden;
}

.header-container {
  background: -webkit-linear-gradient(left, #7abff6 0%, #03a9f4 100%);
  color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.container {
  /*width: 95%;
     max-width: 1000px;
    */
  width: 90%;
  max-width: 1600px;
  height: 84.4px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo__text {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  padding: 18px;
}

.logo__text span {
  font-weight: 400;
  margin-left: 6px;
}

.logo__text1 {
  font-size: 13px;
  padding-left: 220px;
}

.logo__text1 h3 {
  font-weight: 300;
}


/*a.nav-link.availability-button {
            color: #ffffff !important;
            border-width: 0px !important;
            letter-spacing: 1.5px;
            font-size: 14px;
            font-weight: 700 !important;
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }

        a.nav-link.availability-button:hover {
            -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }*/

.nav a.active {
  color: #fff;
}

.nav {
  position: absolute;
  background: #fff;
  -webkit-clip-path: circle(0px at top right);
  clip-path: circle(0px at top right);
  transition: -webkit-clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms, -webkit-clip-path ease-in-out 700ms;
}

.nav--open {
  -webkit-clip-path: circle(250% at top right);
  clip-path: circle(250% at top right);
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  border-bottom: 1px solid #575766;
  border-left: 1px solid #575766;
  border-right: 1px solid #575766;
}

.nav li:last-child {
  border-bottom: none;
}

@media screen and (max-width: 1240px) {
  /*.nav li:last-child {
                display: none;
            }*/
}

@media screen and (min-width: 1200px) {
  .check-button {
    display: none !important;
  }
}

.nav-link {
  color: #000;
  font-size: 14px;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  outline: none;
}


/*.nav-link:hover,
        .nav-link:focus {
            background: #74d057;
            color: #fff;
        }*/

.nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1em;
  width: 1.1em;
  text-align: right;
  /*color: #000;*/
}

i.fas.fa-home.nav--icon {
  color: #552401;
}

i.far.fa-image.nav--icon {
  color: #9a57d8;
}

i.fas.fa-bed.nav--icon {
  color: #ef991f;
}

i.far.fa-thumbs-up.nav--icon {
  color: #5912d0;
}

i.fas.fa-sun.nav--icon {
  color: #f2da08;
}

i.fas.fa-envelope.nav--icon {
  color: #0a2fa0;
}

.menu-toggle {
  padding: 1em;
  padding-right: 50px;
  position: absolute;
  top: 1em;
  right: -25px;
  cursor: pointer;
  z-index: 3;
}

@media only screen and (min-width: 480px) {
  .menu-toggle {
    top: 1.6em;
  }
}

@media only screen and (max-width: 479px) {
  .container {
    height: 70px;
  }
  .menu-toggle {
    top: 1.2em;
  }
  .nav {
    top: 70px !important;
  }
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: #fff;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  -webkit-transition: all ease-in-out 500ms;
  -o-transition: all ease-in-out 500ms;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.hamburger::after {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

.open .hamburger {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  -webkit-transform: translateY(-3px) rotate(-90deg);
  -ms-transform: translateY(-3px) rotate(-90deg);
  transform: translateY(-3px) rotate(-90deg);
}

@media only screen and (max-width: 982px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
  .nav-link:hover,
  .nav-link:focus {
    background: #74d057;
    color: #fff;
  }
}

@media only screen and (max-width: 602px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (max-width: 480px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (min-width: 983px) {
  .menu-toggle {
    display: none;
  }
  .nav {
    height: auto;
    position: relative;
    background: transparent;
    clip-path: initial;
    -webkit-clip-path: initial;
  }
  .nav li {
    display: inline-block;
    border: none;
  }
  .nav a {
    padding: 0.5em;
    /*margin-left: 1em;*/
    color: #fff;
  }
  .nav-item {
    position: relative;
  }
  .nav-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #edbb5f;
    transition: all 0.5s ease-in-out;
    z-index: -1;
  }
  .nav-item:hover:before {
    width: 100%;
  }
  nav ul li.active-link {
    background: #edbb5f;
  }
  /*.nav a:hover,
            .nav a:focus {
                background: #edbb5f;
                padding: 7px;
            }*/
  .nav--icon {
    display: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .nav a {
    padding: 1.3em 2.5em 1.3em 1em;
  }
  .logo__text {
    padding: 18px 18px 18px 0;
    font-size: 22px;
    margin-left: 0;
  }
  .container {
    max-width: 480px;
  }
}

@media only screen and (max-width: 361px) {
  .logo__text {
    font-size: 20px;
  }
  .logo__text1 {
    font-size: 10px;
  }
}


/*End My Special Menu*/

.section-header-area {
  background: url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/villa-blueview-bg02.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 10px;
}

@media only screen and (max-width: 767px) {
  .section-header-area {}
}

.section-header {
  text-align: center;
}

.section-header h2 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 44px;
  color: #565656 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

.section-header h2 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(left, #1e83ec 0%, #f6653c 100%);
}

strong {
  font-weight: 700;
}

.section-header h3 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 1.6vw;
  color: #767676 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

@media only screen and (max-width: 980px) {
  .section-header h2 {
    font-size: 44px;
  }
  .section-header h3 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .section-header h2 {
    font-size: 34px;
  }
  .section-header h3 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 620px) {
  .section-header h2 {
    font-size: 28px;
  }
}


/*Back To Top*/

.scrollTop {
  position: fixed;
  bottom: 800px;
  right: 23px;
  width: 50px;
  height: 50px;
  background: #399cf1 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  border-radius: 50%;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

.scrollTop.active {
  bottom: 100px;
  visibility: visible;
  opacity: 1;
}

.scrollTop:hover {
  background: #66b5f8 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.showOverlay {
  display: block;
}

@media only screen and (min-width: 983px) {
  /*to stop overlay coming into screen on desktop when clicked on menu links otherwise it brings overlay layer on top of sections then it needs to be clicked on to make it dissappear */
  .showOverlay {
    display: none;
  }
}

.hero-area {
  height: 800px;
  background-color: blanchedalmond;
}

.info-blurbs {
  height: 800px;
  background-color: red;
}

.container-grid-masonry {
  height: 700px;
  background-color: yellow;
}

.container-rooms {
  height: 700px;
  background-color: green;
}

.container-reviews {
  height: 700px;
  background-color: pink;
}

.container-activities {
  height: 700px;
  background-color: #ddd;
}

.container-contact {
  height: 1200px;
  background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  onclick="scrollToTop();"></div>
<div >
  <div >
    <div >V&#304;lla<span>Mav&#304; Manzara</span>
      <div >
        <h3>KA&#350; / ANTALYA</h3>
      </div>
    </div>
    <div ></div>
    <nav >
      <ul >
        <li ><a  href="#amenities"><i ></i>Amenities</a></li>
        <li ><a  href="#gallery"><i ></i>Gallery</a></li>
        <li ><a  href="#rooms"><i ></i>Rooms</a></li>
        <li ><a  href="#reviews"><i ></i>Reviews</a></li>
        <li ><a  href="#activities"><i ></i>Activities</a></li>
        <li ><a  href="#contact"><i ></i>Contact</a></li>
        <!--<li ><a  href="https://www.airbnb.com/rooms/18783099">Check Availability</a></li>-->
      </ul>
    </nav>
    <div >
      <div ></div>
    </div>
  </div>
</div>
<div ></div>
<!--Amenities Text--->
<section id="amenities" >
  <div >
    <h2><strong>Amenities</strong> Villa Mavi Manzara</h2>
  </div>
  <!--Amenities Blurbs--->
  <div >1</div>
</section>

<!--Gallery Text--->
<section id="gallery" >
  <div >
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
  <!--Gallery--->
  <div >2</div>
</section>

<!--Room Details Text--->
<section id="rooms" >
  <div >
    <h2><strong>Room</strong> Details</h2>
  </div>
  <!--Rooms-->
  <div >3</div>
</section>

<!--Review Text--->
<section id="reviews" >
  <div >
    <h2><strong>Reviews</strong> Villa Mavi Manzara</h2>
  </div>
  <!--Reviews-->
  <div >4</div>
</section>

<!--Activities Text--->
<section id="activities" >
  <div >
    <h2><strong>Activities</strong> Villa Mavi Manzara</h2>
  </div>
  <!--Activities-->
  <div >5</div>
</section>

<!--Contact Text--->
<section id="contact" >
  <div >
    <h2><strong>Contact</strong> Us</h2>
  </div>
  <!--Contact Section-->
  <div >6</div>
</section>

Page link：https//www.codepudding.com/Blockchain/303475.html

Prev:For each div that has li, add class
Next:How do I pass a data from an HTML form to my Node.js file?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding