Fixed Headers and Section Anchors with bootstrap

user_11371770 0
Viewed 832

I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.

And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both. here is a link to the live page to see what happens when you click any link for #about section: portfolio #about

https://kingdomb.github.io/live_portfolio/#about

NOTE: The code below does not give display the error properly so use the link above.

UPDATE: 3/22 02:16 I managed to find this:

Come on guys!

This have a very simple solution, create your ancho like this:

<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>

With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.

Works like a charm. I use this trick in all one page design websites.

BUT, now one click on the about link in the navbar to #myanchor gives me this:correct position

And if I click the exact same navbar link I get a minor adjustment to this:incorrect position

THANKS!!!

// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
  myFunction2();
};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll 
position.Remove "sticky"
when you leave the scroll position

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

// Get the logo
var logo = document.getElementById("logo");

// Get the offset position of the logo
var logoSpin = logo.offsetTop;

// Add the logo-spin class to the navbar when you reach its scroll 
position.Remove "logo-spin"
when you leave the scroll position

function myFunction2() {
  if (window.pageYOffset >= logoSpin) {
    logo.classList.add("logo-spin");
  } else {
    logo.classList.remove("logo-spin");
  }
}

// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
//   .filter(function() {
//     return this.hostname != window.location.hostname;
//   })
//   .attr("target", "_blank");

//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
  for (var c = document.getElementsByTagName("a"), a = 0; a <
    c.length; a++) {
    var b = c[a];
    b.getAttribute("href") &&
      b.hostname !== location.hostname &&
      (b.target = "_blank");
  }
}
externalLinks();
html,
body {
  background-color: #E3E3E3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


/* HOME */

.section1 {
  background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
}

.section1 .container {
  background-color: rgb(0, 0, 0, 0.65);
  min-height: -webkit-fill-available;
  min-width: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-btn {
  background-color: transparent;
  font-weight: 500;
  border-color: #8e0000;
  border-radius: 3px;
  color: #8e0000;
  margin-top: 35px;
  font-size: 1.12em;
  transform: translate(-50%, -50%);
  position: absolute;
  text-shadow: .1px .8px 1px black;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}


/* hover styling required !important */

.home-btn:hover {
  color: #8e0000 !important;
  border-color: #8e0000;
  font-size: 1.4em;
  border-width: 3px;
  font-weight: 600;
  text-shadow: .1px 2px 1px black;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.intro {
  color: white;
  font-size: 2.74em;
  text-shadow: .1px .8px 1px black;
}

.highlight {
  color: #8e0000;
  text-shadow: .1px .8px 1px black;
}


/* NAVIGATION */

.logo {
  display: inline-flex;
  flex-direction: row;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.navbar-brand {
  margin: 0px;
  padding: 0px 0px !important;
}

.logo-wrapper {
  color: white;
  font-size: 1.4em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 2px 1px black;
}

.logo-spin {
  -webkit-animation: spin 1s;
  animation: spin 3s;
  animation-iteration-count: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

.navbar {
  background-color: #333;
  height: 65px;
  border-bottom: 6px solid #212529;
  border-top: 6px solid #212529;
}

#navbar {
  z-index: 9999;
}

.navbar-text {
  vertical-align: middle;
  margin-left: 200px;
  height: inherit;
}

@media only screen and (max-width: 860px) {
  .navbar-text {
    display: inline-block;
    align-items: center;
    margin-left: 30px;
  }
}

#navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
  font-size: 1.2em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 1px 1px black;
}


/* ABOUT */

#about {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  text-shadow: .1px .8px 1px black;
  position: relative;
  height: -65px;
  margin-top: 200px;
}


/* .section2 {
  position: absolute;
  width: 100%;

} */

.section2 .row {
  background: url("../images/improved-teamwork-and- 
 collaboration_1887x741.jpg") center center no-repeat;
 height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 0%;
}

.section2 .card {
  background-color: RGBA(33, 37, 41, .80);
  color: white;
  min-height: -webkit-fill-available;
  height: 100%;
}

.section2 .card-block {
  font-weight: 520;
  width: 50%;
  margin: 0 auto;
  font-size: 25px;
  line-height: 50px;
  padding: 60px;
}

.section2 a {
  color: #9b0000;
  -webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.section2 .card-block {
  z-index: 8000;
  padding-right: 200px;
  padding-left: 0px;
  margin-left: 100px;
}

.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
  text-decoration: underline;
}

.section2 .btn {
  border-color: #8e0000;
  border-radius: 13px;
  border-width: 3px;
  font-weight: 500;
  font-size: 0.8em;
  transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}

.section2 .btn:hover {
  background-color: #8e0000;
  color: #212529;
  text-decoration: none;
}

#about {
  margin-bottom: 75px;
}
<!doctype html>
<html lang="en">

<head>

</head>

<body>

  <!-- HOME -->
  <section id="home" class="section1">
    <div class='container'>
      <div class="row justify-content-center">
        <div class="col-md-12 col-sm-12">
          <p class='intro'>
            Hello, my name is <span class="highlight animated fadeIn" style="animation-delay:             1s; animation-duration: 
1.8s">King</span>.
            <br>
            <div class="intro animated fadeInLeft" style="animation- 
delay: 3s; animation-                 duration: 2s">And I'm a full- stack web developer.</div>
            <a href="#myanchor"><button type="button" class="home-btn 
btn btn-primary-outline                btn-xs animated fadeIn"
             style="animation-delay: 5s; animation-duration: 
2s">VIEW MY WORK</button></a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- NAVIGATION -->
  <div id="navbar">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <div class="container">
        <div class="logo-wrapper nav-item active">
          <div class="logo" id="logo">
            <a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand                 Logo"></a>
          </div>
          <span class="brand" id="brand" style="animation-delay: 0s; 
animation-duration:                 3s">KING MAJOR</span>
        </div>
        <button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#myanchor">ABOUT
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#skills">SKILLS
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects">PROJECTS
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT
                <span class="sr-only">(current)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </div>

  <!-- ABOUT -->
  <div class="blank" style="margin: -65px 0px 200px 0px; position: 
absolute;">
    <a id="myanchor"></a>
  </div>
  <section id="about" class="section2">
    <div class="row-fluid">
      <div class="row">
        <div class="card ">
          <div class="card-block">
            <div class="card-title">
              <h1>Welcome, <a href="#">let's talk!</a></h1>
            </div>
            <div id="container">
              <p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
                <a href="#skills">skills</a>, and some of my recent
                <a href="#projects">projects</a>. THANKS!
              </p>
              <a href="General_Resume.pdf" class="btn btn-outline- 
    primary" target="__blank">Print My Resume
            </a>

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

</body>

</html>

bootstrap-4 css html javascript
2 Answers

The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.

I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.

I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools

As for your navbar fixed, here is some code that you should use instead of the one you have now.

    var elementPosition = $("#navbar").offset();

    $(window).scroll(function() {
    if ($(window).scrollTop() > elementPosition.top) {
        $("#navbar")
        .css("position", "fixed")
        .css("top", "0");
    } else {
        $("#navbar").css("position", "static");
    }
    });

Edit One: Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.

user_129651110

I found a solution! I refactored the code in the ABOUT section to this:

<!-- ABOUT -->
<div class="blank" style="position: absolute">
  <a id="myanchor"></a>
</div>
<section id="about" class="section2">
  <div class="row-fluid">
    <div class="row">
      <div class="card ">
        <div class="card-block">
          <div class="card-title">
            <h1>Welcome, <a href="#">let's talk!</a></h1>
          </div>
          <div id="container">
            <p> I started independent web development two years ago, and haven't looked back. A              couple of things I love about coding are those moments when tough projects are                  complete, or discovering a solution to a difficult problem. Take a look at my
              <a href="#skills">skills</a>, and some of my recent <a                                         href="#projects">projects</a>. THANKS!
            </p>
            <a href="General_Resume.pdf" class="btn btn-outline-primary" target="__blank">Print              My Resume</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Notice that I removed the opening div margin html styling.

user_113717700
Related