* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-weight: 500;
font-family: 'Helvetica Neue', sans-serif;
}
main {} .bckgrnd {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
height: 100%;
width: 100%;
}
#break {
clear: both;
}
div {
width: 100%;
margin: 0;
padding: 0 10%;
max-width: none;
overflow: hidden;
}
header {
height: 60vh;
}
#header-slide .bckgrnd {
background-image: url("../img/headerslide.jpg");
background-size: cover;
}
#navigation ul {
padding: 5px 10%;
opacity: 0.1;
margin: 0;
background-color: #ffffff;
height: 6vh;
width: 100%;
!important
}
#navigation li {
float: left;
background-color: none;
list-style: none;
}
#intro-main {
height: 100vh;
background-color: #373B44;
}
#mse {
height: 100vh;
background-color: #000000;
background-image: url("../img/mse.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#isg {
height: 100vh;
background-color: #cccccc;
background-image: url("../img/isg.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#about {
height: 50vh;
background-color: #A8A8A8;
}
#credits {
height: 4vh;
background-color: #101010;
}<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mse & Isg</title>
<meta name="description" content="Embroidery Ads Coveralls Signs Graphic Decals">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<main>
<header id="header-slide" class "header">
<div class="bckgrnd" data-center="background-position: 100% 0px;" data-top-bottom="background-position: 100% -250px;">
</div>
<nav id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Mse</li>
<li>Isg</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div id="intro-main">
</div>
<div id="mse">
</div>
<div id="isg">
</div>
<div id="about">
</div>
<div id="credits">
</div>
</main>
<script src="js/jquery.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/stickUp.min.js"></script>
<script type="text/javascript">
var s = skrollr.init({
forceHeight: false
});
jQuery(function($) {
$(document).ready(function()
$('#navigation').stickUp();
});
});
</script>
</body>
</html>Being relatively new to coding, although studying computer science in college, now is my first time applying my skills practically.
The challenge lies in a website design project for a company where most of the layout has been completed.
The issue at hand pertains to the sticky navigation bar's behavior which seems erratic, shifting to the right when scrolled down instead of sticking as intended with a consistent 100% width.
This discrepancy may be attributed to a compatibility concern between stickUp.js and skrollr, two integral plugins utilized in this web development endeavor.
To better illustrate the problem, refer to the following link:
Note that the image files are presently oversized placeholders, serving as temporary visuals until further refinement since skrollr will play a significant role in enhancing the site's aesthetics.
I appreciate any assistance offered. Thank you in advance.