Question posted in 
I want the nav bar and header to just be at the top of the page but instead it stays on the screen as scrolling. Anytime i try to fix it it just sends the title to the side or messes with the design on the nav bar. And im struggling with getting everything to center and scale down if the window is minimized. I want to have all contents center and the nav to just hide as you scroll.
my mess of a website atm
html {
background-image: url('background.png');
background-size: cover;
text-align: center;
}
/*title formatting*/
h1 {
font-size: 130px;
line-height: calc(10px + 15vh);
/* text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
color: #fccaff; */
text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
color: #280000;
font-family: 'Guttural';
text-align: center;
justify-content: center;
align-items: center;
display: flex;
animation: blink 9s infinite;
-webkit-animation: blink 9s infinite;
}
body {
font-family: 'Glitch Goblin';
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* effect for title*/
@-webkit-keyframes blink {
20%,
24%,
55% {
color: #8000;
text-shadow: none;
}
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
/* color: #fccaff;
text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
color: #0C0303;
}
}
@keyframes blink {
20%,
24%,
55% {
color: #120101;
text-shadow: none;
}
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
/* color: #fccaff;
text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
color: #280000;
}
}
nav {
position: fixed;
top: 0;
width: 100%;
}
img {
display: flex;
}
a {
font-size: 1.5rem;
padding: 1rem 3rem;
color: #ff0000;
text-transform: uppercase;
}
/* NAV BUTTON*/
:root {
--glow-color: hsl(0 100% 47%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.glowing-btn {
position: relative;
color: var(--glow-color);
cursor: pointer;
padding: 0.5em 1em;
border: 0.15em solid var(--glow-color);
border-radius: 0.45em;
background: none;
perspective: 2em;
font-size: 2em;
font-weight: 900;
letter-spacing: 0.8em;
-webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
-moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
animation: border-flicker 2s linear infinite;
}
.glowing-txt {
float: left;
margin-right: -0.8em;
-webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
-moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
animation: text-flicker 3s linear infinite;
}
.faulty-letter {
opacity: 0.5;
animation: faulty-flicker 2s linear infinite;
}
.glowing-btn::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
filter: blur(1em);
transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
background: var(--glow-color);
pointer-events: none;
}
.glowing-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: -1;
background-color: var(--glow-color);
box-shadow: 0 0 2em 0.2em var(--glow-color);
transition: opacity 100ms linear;
}
.glowing-btn:hover {
color: rgba(0, 0, 0, 0.8);
text-shadow: none;
animation: none;
}
.glowing-btn:hover .glowing-txt {
animation: none;
}
.glowing-btn:hover .faulty-letter {
animation: none;
text-shadow: none;
opacity: 1;
}
.glowing-btn:hover:before {
filter: blur(1.5em);
opacity: 1;
}
.glowing-btn:hover:after {
opacity: 1;
}
@keyframes faulty-flicker {
0% {
opacity: 0.1;
}
2% {
opacity: 0.1;
}
4% {
opacity: 0.5;
}
19% {
opacity: 0.5;
}
21% {
opacity: 0.1;
}
23% {
opacity: 1;
}
80% {
opacity: 0.5;
}
83% {
opacity: 0.4;
}
87% {
opacity: 1;
}
}
@keyframes text-flicker {
0% {
opacity: 0.1;
}
2% {
opacity: 1;
}
8% {
opacity: 0.1;
}
9% {
opacity: 1;
}
12% {
opacity: 0.1;
}
20% {
opacity: 1;
}
25% {
opacity: 0.3;
}
30% {
opacity: 1;
}
70% {
opacity: 0.7;
}
72% {
opacity: 0.2;
}
77% {
opacity: 0.9;
}
100% {
opacity: 0.9;
}
}
@keyframes border-flicker {
0% {
opacity: 0.1;
}
2% {
opacity: 1;
}
4% {
opacity: 0.1;
}
8% {
opacity: 1;
}
70% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@media only screen and (max-width: 600px) {
.glowing-btn {
font-size: 1em;
}
}<nav>
<h1>Freakish Bizzaar Studio</h1>
<a class="glowing-btn" href="Index.html"><span class="glowing-txt">H<span class="faulty-letter">O</span>ME</span></a>
<a class="glowing-btn" href="Shop.html"><span class="glowing-txt">S<span class="faulty-letter">H</span>OP</span></a>
<a class="glowing-btn" href="Album.html"><span class="glowing-txt">ALB<span class="faulty-letter">U</span>M</span></a>
<a class="glowing-btn" href="History.html"><span class="glowing-txt">HI<span class="faulty-letter">STO</span>RY</span></a>
<a class="glowing-btn" href="Contact.html"><span class="glowing-txt">CON<span class="faulty-letter">TA</span>CT</span></a>
</nav>
<br>
<br>
<img src="sitestyles/Divider.png" alt="" width="2800" height="321" />Scss=
`nav{
width: 100%;
position: fixed;
top:50px;
text-align:center;
}
nav a{
font-weight:800;
text-transform:uppercase;
text-decoration:none;
color:#16151b;
margin:0 15px;
font-size:16px;
letter-spacing:1px;
position:relative;
display:inline-block;
}
nav a:before{
content:'';
position: absolute;
width: 100%;
height: 3px;
background:#16151b;
top:47%;
animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
@keyframes in{
0%{
width: 0;
left:0;
right:auto;
}
100%{
left:0;
right:auto;
width: 100%;
}
}
@keyframes out{
0%{
width:100%;
left: auto;
right: 0;
}
100%{
width: 0;
left: auto;
right: 0;
}
}
@for $i from 1 through 5 {
nav a:nth-child(#{$i}){
animation:show .2s #{$i*0.1+1}s ease 1 both;
}
}`
3
Answers
U can add JavaScript code to listen for the scroll events and adjusts the position of the navbar accordingly. When the user scrolls down, it hides the navbar by setting its top property to a negative value, and when the user scrolls up, it brings the navbar back into view.
For example try this:
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; /* Show navbar when scrolling up / } else { document.getElementById("navbar").style.top = "-100px"; / Hide navbar when scrolling down */ } prevScrollpos = currentScrollPos; } //something like that
You need to remove the fixed property from your nav element. The fixed position means fixed to where it is on the viewport, not fixed to where the element is initially rendered. Here’s a link for css positioning.
When you remove the fixed position on navbar, all html element moves to the left halfway offscreen and it is because you have defined flex property in body so all elements are being display flex and not taking 100% width. I replaced your flex css to custom class and I updated your code. Please check:-
Let me know if it works for you or not.