I have been frustratingly trying to get the "sticky" CSS property to work on my navbar and can not figure out how. At first I thought it was the flexbox, so I removed all of it and it still didn't work. Then I thought it was maybe a child-parent issue but still couldn't get it to work after troubleshooting it that way. I also don't want to use position: fixed because as far as I can tell it cuts off the top of the other content by putting it on top of it. Unlike sticky does. Any help would be appreciated.
@import url('https://fonts.googleapis.com/css2?family=Stick No Bills:wght@600&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica;
padding: 0px;
margin: 0px;
}
.main-nav {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
height: 7vh;
padding: 10px;
background-color: #ffffff;
position: sticky;
top: 0;
font-family: sans-serif;
}
.main-nav ul {
display: flex;
flex-wrap: wrap;
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 17px;
}
.main-nav a {
color: inherit;
padding: 0;
text-decoration: none;
padding: 1rem;
}
.main-nav .nav-right {
justify-items: right;
}
.main-nav li:hover {
color: rgba(0, 0, 0, 0.5);
}
.header-container {
display: flex;
justify-content: center;
align-items: center;
background: rgb(161, 117, 63);
background: linear-gradient(90deg, rgba(161, 117, 63, 1) 0%, rgba(192, 139, 74, 1) 50%, rgba(161, 117, 63, 1) 100%);
width: 100%;
height: 50vh;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.header-content {
color: rgb(255, 255, 255);
font-size: 125px;
position: absolute;
white-space: nowrap;
font-family: 'Stick No Bills', sans-serif;
text-decoration: underline;
}
.header-content-subheading {
position: relative;
display: inline;
padding-top: 175px;
font-size: 17px;
font-family: monospace;
}
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@media (max-width: 600px) {
.header-content {
font-size: 110px;
}
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="homepageStyle.css">
<title>Iron Wood</title>
</head>
<body>
<header>
<nav class="main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#"><i class="fa fa-shopping-cart"></a></i>
</li>
</ul>
</nav>
</header>
<div class="header-container">
<div class="header-content tracking-in-expand">Iron Wood</div>
<div class="header-content-subheading">Custom Woodworking</div>
</div>
</body>CodePudding user response：
Add the sticky code to the header element instead.
Cool text animation, by the way.
@import url('https://fonts.googleapis.com/css2?family=Stick No Bills:wght@600&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica;
padding: 0px;
margin: 0px;
min-height: 300vh;
}
header {
z-index: 100;
position: sticky;
top: 0;
}
.main-nav {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
height: 7vh;
padding: 10px;
background-color: #ffffff;
font-family: sans-serif;
}
.main-nav ul {
display: flex;
flex-wrap: wrap;
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 17px;
}
.main-nav a {
color: inherit;
padding: 0;
text-decoration: none;
padding: 1rem;
}
.main-nav .nav-right {
justify-items: right;
}
.main-nav li:hover {
color: rgba(0, 0, 0, 0.5);
}
.header-container {
display: flex;
justify-content: center;
align-items: center;
background: rgb(161, 117, 63);
background: linear-gradient(90deg, rgba(161, 117, 63, 1) 0%, rgba(192, 139, 74, 1) 50%, rgba(161, 117, 63, 1) 100%);
width: 100%;
height: 50vh;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.header-content {
color: rgb(255, 255, 255);
font-size: 125px;
position: absolute;
white-space: nowrap;
font-family: 'Stick No Bills', sans-serif;
text-decoration: underline;
}
.header-content-subheading {
position: relative;
display: inline;
padding-top: 175px;
font-size: 17px;
font-family: monospace;
}
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@media (max-width: 600px) {
.header-content {
font-size: 110px;
}
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="homepageStyle.css">
<title>Iron Wood</title>
</head>
<body>
<header>
<nav class="main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#"><i class="fa fa-shopping-cart"></a></i>
</li>
</ul>
</nav>
</header>
<div class="header-container">
<div class="header-content tracking-in-expand">Iron Wood</div>
<div class="header-content-subheading">Custom Woodworking</div>
</div>
</body>CodePudding user response：
position: sticky works but it's not visible because it is
relative to its nearest scrolling ancestor
https://developer.mozilla.org/en-US/docs/Web/CSS/position
which it is header.
TWO OPTIONS
1.On the main-nav, you can use position: fixed instead of sticky:
.main-nav {
position: fixed;
width: 100%;
z-index: 999;
}
2.or move position: sticky on the header so it will impact the body element:
header {
position: sticky;
top: 0
z-index: 1;
}