How can I develop a responsive and sticky nav bar with no jumping?

Question

I have a responsive header that changes as my screen size changes. This is proving to make it difficult to create a sticky and responsive navbar that doesn't jump as the header size is always changing. I am in the process of making my website mobile friendly and this is an issue I've been working on for hours now.

I have tried wrapping my navbar in a div wrapper and some other suggested things to keep it from jumping.

HTML:

<img src="banner.png" alt="Kayla Mustion - Full-Stack Web Developer" class="responsive">
</head>

<body>

<div class="navbar" id="navbar">
    <a class="active" href="index.html">Home</a>
    <a href="projects.html">Projects</a>
    <a href="photography.html">Photography</a>
    <a href="blog.html">Blog</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="mobileMenu()">
        <i class="fa fa-bars"></i>
    </a>
</div>

Javascript at bottom of page:

<script>
function mobileMenu() {
  var x = document.getElementById("navbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}   

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

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

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


</script>

CSS:

.responsive {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 95%;
    height: auto;
}

.navbar {
  overflow: hidden;
  background-color: #B2861E;
  position: sticky;
  scroll-behavior: smooth;
}

.navbar a {
  float: left;
  display: block;
  color: #453C32;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #4F5D75;
  color: #453C32;
}

.navbar a.active {
  background-color: #453C32;
  color: #B2861E;
}

.navbar .icon {
  display: none;
}

.content {
  padding: 30px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}

I would like the nav bar to stick when it reaches the top, not jump when it reaches a certain point in pixels no matter the screen size. I posted what is relevant to this section but can upload the whole code somewhere if need be.

Answer 1

Okay so I added in some bootstrap as I'm using bootstrap frequently and found a bit of code I wanted to try. I wrapped the navbar in a sticky-top class bootstrap wrapper. Hope this helps someone in the future!

Essentially, now the navbar sticks to the top of the page no matter what size my responsive header image is. That way it can be responsive and I don't have to set any particular size for the header.

How can I develop a responsive and sticky nav bar with no jumping?

Question

1 answers

solution1
1 2019-08-13 01:46:33

How can I develop a responsive and sticky nav bar with no jumping?

Question

1 answers

solution1 1 2019-08-13 01:46:33

solution1
1 2019-08-13 01:46:33