I was having some problems with a fixed bar and max-width.
I came up with the solution using JS (even though sometimes on loads, the fixed Bar kind of that 'flickers') but I want a more simple solution, just with CSS.
Can you guys help me with that flicker? Can I do this without JS?
CSS:
body {
margin: 0;
font-size: 25px;
}
* {box-sizing: border-box;}
.navBar {
position: fixed;
width: 80%;
border: 2px solid gray;
height: 50px;
top: 100px;
left: 10%;
}
.contentContainer {
border: 2px solid green;
height: 3000px;
width: 80%;
margin: 150px auto;
/* max-width: 900px; */
}
@media only screen and (min-width: 1100px) {
.contentContainer {
width: 900px;
margin: 150px auto;
}
#navBar {
width: 900px;
}
}
@media only screen and (max-width: 992px) {
.contentContainer {
width: 90%;
}
.navBar {
width: 90%;
left: 5%;
}
}
HTML:
<body onresize="myFunction()" onload="myFunction()">
<div class="navBar" id="navBar">
navBar
</div>
<div class="contentContainer"
id="contentContainer">
Content Container
</div>
JS:
function myFunction() {
var w = window.innerWidth;
var test = ((w - 900) / 2) - 8;
test = test + "px";
var navBarWidth = y.offsetWidth;
if (navBarWidth == 900) {
y.style.left = test;
}
if((w >= 600) || (w <= 992)) {
var barWidth = y.offsetWidth;
var test = ((w - barWidth) / 2) - 8;
test = test + "px";
y.style.left = test;
}
}