Why does my navbar move a little bit to the right while scrolling on small screens?

user_13490131 0
Viewed 1212

As the question indicates, my problem is that, when I resize the window to a small size and scroll down right floating elements of my navbar slide a little bit to the right and are not fully visible anymore in the window.

I am pretty new to web development in general so any help would be much appreciated.

This is the code for my scroll function:

// When the user scrolls the page, execute myFunction
window.onscroll = myFunction
// 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");
  }
}

Thanks in advance.

Here is the code: https://jsfiddle.net/mxfiddle/fubLo45j/

css html javascript
1 Answers

This behaviour is happening because position:fixed element is out of the normal document flow so it's not taking the width of its container div (navbar-wrapper). You need to calculate that width on the sticky element explicitly.

I have used width:calc(100% - 60px) !important for that.

The 100% means the 100% of the width of the viewport width in your case. Now substract 60px in total because you have 30px of left and right margins defined on your body element.

The !important (it looks like not important but it means this is important ) bit is required because you're adding your sticky class explicitly using JS at a later time when all the CSS properties are already applied with appropriate specificty. So whatever has been applied for width initially is overridden by you using !important.

Note - The !important usage should be avoided. If you're responsible for creating your own css and are experiencing major usage of !important in your code, that indicates that your CSS can utilize a refactor.

// When the user scrolls the page, execute myFunction
window.onscroll = myFunction
// 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");
  }
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: auto;
  padding: 0px;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  max-width: 900px;
  font-family: "PMN Caecilia", sans-serif;
  text-align: justify;
  list-style: decimal;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  overflow-y: scroll;
  margin: 30px;
  line-height: 1.6;
  font-size: 120%;
  max-width: 800px;
  margin-bottom: 100px;
  background-color: #FAFAFA;
  color: #000000;
}

h1 {
  font-size: 220%;
  font-family: "PMN Caecilia", sans-serif;
  margin-bottom: 30px;
  margin-top: 30px;
}

h2 {
  font-family: "PMN Caecilia", sans-serif;
  font-size: 160%;
}

p {
  font-size: 85%;
  margin-top: 30px;
  margin-bottom: 30px;
}

a {
  color: #8000FF;
  text-decoration: none;
  position: relative;
}

#navbar {
  float: left;
  height: 80px;
  width: 100%;
  max-width: 800px;
  top: 0px;
  overflow: hidden;
  background-color: #FAFAFA;
}

#navbar a {
  top: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
}

#navbar a:after {
  content: "";
  position: absolute;
  left: 0%;
  right: 100%;
  bottom: -5px;
  background: #8000FF;
  height: 3px;
  transition-property: left right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

#navbar a:hover:after {
  right: 0%;
}

.sticky {
  position: fixed;
  top: 0;
  width: calc(100% - 60px) !important;
}

.header {
  width: 100%;
  top: 0px;
  margin-bottom: 100px;
}

.content {
  top: 0px;
  width: 100%
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>This will be my personal webiste!</title>
    <link href="/Users/max/Desktop/Site/set.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/Users/max/Desktop/Site/navbar.js" async></script>
  </head>

  <body>
    <div class="navbar-wrapper" style="height: 80px">
      <div id="navbar">
        <a style="float: left" href="/Users/max/Desktop/Site/index.html">Hello World!</a>
        <a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Writing.html">Writing</a>
        <a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Projects.html">Projects</a>
        <a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/About.html">About</a>
      </div>
    </div>
    <div class="header">
      <h1>Hello, World!</h1>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit quam magna, vitae viverra magna accumsan quis. Quisque venenatis nisl eu erat viverra posuere. Cras sed risus ut tortor porttitor luctus et ac velit. Nunc aliquam commodo mauris nec luctus. Phasellus commodo rutrum diam id placerat. In pretium nec metus quis vehicula. Pellentesque euismod, purus id tempor imperdiet, justo turpis vestibulum dui, non tristique tortor est a urna. Suspendisse lobortis faucibus nisl in faucibus. Vestibulum id lacus justo. Vestibulum justo lectus, euismod sit amet tellus sed, hendrerit pellentesque tellus. Nulla semper et tellus eu gravida. Duis non leo sit amet augue sagittis convallis non id ipsum. Sed nec nisi sit amet augue facilisis ullamcorper et in sem. Suspendisse ut purus nec ligula varius dictum.

Etiam porta nunc eu urna luctus porta. In tellus felis, bibendum vel eleifend vitae, gravida suscipit metus. Nunc sed eleifend risus. In at fermentum enim. Pellentesque malesuada libero ut tortor varius, ut porttitor risus bibendum. Ut hendrerit semper sapien, feugiat tempus velit hendrerit in. Aliquam consequat tempor urna, et varius sapien luctus eu. In nulla orci, mollis et fermentum ac, malesuada et nisi. Proin sed felis at metus ornare accumsan at sit amet arcu. Vestibulum enim augue, feugiat vel ligula in, aliquet condimentum mi. Curabitur ullamcorper dui ante, sit amet vehicula neque hendrerit id. Phasellus malesuada non nisi sed convallis. Mauris in ligula vel felis bibendum viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada pellentesque imperdiet. Nam pretium odio in tellus pulvinar malesuada.
      </p>
    </div>
  </body>

user_81306900
Related