Issue
My header comes from the function.php file which in return does a echo <<<EOT for the page layout.
The section looks like this:
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
</head>
<body>
<header>
There are, obviously, <link> tags for CSS and JS - but to keep this short, that is how it looks. Then, in the CSS, I have tried many different things to make the header sticky.
As of right now, the CSS for the header looks like this:
header {
position: relative;
border-bottom: 2px solid #fff;
}
I have tried changing that into this (without success):
position: fixed;
top: 0;
width: 100%;
background-color: #333;
Any ideas on how to make the header sticky without affecting the rest of the page layout? And just to be clear, I have deleted the cache and what not, but nothing seem to work.
I have even tried to give the header a class / ID and style it that way, but that too does nothing.
Solution
Use position: sticky to make an element ... sticky:
header {
position: sticky;
border-bottom: 2px solid #fff;
top: 0;
width: 100%;
background-color: #333;
}
Answered By - brombeer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.