Making the upper part of a site sticky with CSS and HTML - html

Question

I'm trying to make a sidebar and top of the page not move when you scroll (like Twitter, Facebook, etc.).
I'm only using CSS and Html.
I managed to make the side bars stay there, but the "Home" part does not work.
I tried with Position: Sticky, set overflow-x to auto for the parent, tried wrapping it into another div and self-align: flex-start, but nothing seems to be working.
Now that I put it into a smaller screen, it also looks to overlap the Side bar with the Feed, and hide the Widgets.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--twitter-color: #50b7f5;
--twitter-background: #e6ecf0;
}
/* Sidebar Styling Starts */
.sidebarOption {
display: flex;
align-items: center;
cursor: pointer;
}
.sidebarOption .material-icons,
.fa-twitter {
padding: 20px;
}
.sidebarOption h2 {
font-weight: 800;
font-size: 20px;
margin-right: 20px;
}
.sidebarOption:hover {
background-color: var(--twitter-background);
border-radius: 30px;
color: var(--twitter-color);
transition: color 100ms ease-out;
}
.sidebarOption.active {
color: var(--twitter-color);
}
.sidebar_tweet {
width: 100%;
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
height: 50px;
margin-top: 20px;
}
body {
display: flex;
height: 100%;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
overflow-x: auto;
}
.sidebar {
border-right: 1px solid var(--twitter-background);
flex: 0.2;
min-width: 250px;
margin-top: 20px;
padding-left: 20px;
padding-right: 20px;
left: 0;
align-self: flex-start;
position: sticky;
top: 0;
overflow-x: auto;
}
.fa-twitter {
color: var(--twitter-color);
font-size: 30px;
}
/* Sidebar Styling Ends */
/* Feed Styling Starts */
.feed {
flex: 0.5;
border-right: 1px solid var(--twitter-background);
min-width: fit-content;
overflow-x: auto;
align-self: flex-start;
}
.feed-header {
border: 1px solid var(--twitter-background);
padding: 15px 20px;
/* I DONT KNOW HOW TO MAKE THIS STICK */
}
.feed-header h2 {
font-size: 20px;
font-weight: 800;
}
.feed::-webkit-scrollbar {
display: none;
}
.feed {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Styling Tweetbox Starts */
.tweetbox__input img {
border-radius: 50%;
height: 40px;
}
.tweetBox {
padding-bottom: 10px;
border-bottom: 8px solid var(--twitter-background);
padding-right: 10px;
}
.tweetBox form {
display: flex;
flex-direction: column;
}
.tweetbox__input {
display: flex;
padding: 20px;
}
.tweetbox__input input {
display: flex;
margin-left: 20px;
font-size: 20px;
border: none;
outline: none;
}
.tweetBox__tweetButton {
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
width: 80px;
height: 40px;
margin-top: 20px;
margin-left: auto;
}
/* Styling Tweetbox Ends */
/* Feed Styling Ends */
/* Post Styling Starts */
.post__avatar img {
border-radius: 50%;
height: 40px;
}
.post {
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--twitter-background);
padding-bottom: 10px;
}
.post__body img {
width: 450px;
object-fit: contain;
border-radius: 20px;
}
.post__footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.post__badge {
font-size: 14px !important;
color: var(--twitter-color);
margin-right: 5px;
}
.post__headerSpecial {
font-weight: 600;
font-size: 12px;
color: gray;
}
.post__headerText {
font-size: 15px;
margin-bottom: 5px;
}
.post__headerDescription {
margin-bottom: 10px;
font-size: 15px;
}
.post__body {
flex: 1;
padding: 10px;
}
.post__avatar {
padding: 20px;
}
/* Post Styling Ends */
/* Widgets Styling Starts */
.widgets {
flex: 0.3;
right: 0;
right: 0;
align-self: flex-start;
position: sticky;
top: 0;
overflow-x: auto;
}
.widgest__input {
display: flex;
align-items: center;
background-color: var(--twitter-background);
padding: 10px;
border-radius: 20px;
margin-top: 10px;
margin-left: 20px;
}
.widgest__input input {
border: none;
background-color: var(--twitter-background);
outline: none;
}
.widgets__searchIcon {
color: gray;
}
.widgets__widgetContainer {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 20px;
padding: 20px;
background-color: #f5f8fa;
border-radius: 20px;
}
.widgets__widgetContainer h2 {
font-size: 18px;
font-weight: 800;
}
.card_container {
display: flex;
flex-direction: column;
align-items: center;
}
.card {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 18rem;
}
.card img {
border-radius: 20px;
width: 18rem;
}
/* Widgets Styling Ends */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twiter Clone</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Sidebar Start -->
<div class="sidebar">
<i class="fab fa-twitter "></i>
<div class="sidebarOption active ">
<span class="material-icons ">home</span>
<h2>Home</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">search</span>
<h2>Explore</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">notifications_none</span>
<h2>Notifications</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">mail_outline</span>
<h2>Message</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">bookmark_border</span>
<h2>Bookmarks</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">list_alt</span>
<h2>Lists</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">perm_identity</span>
<h2>Profile</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">more_horiz</span>
<h2>More</h2>
</div>
<button class="sidebar_tweet">Tweet</button>
</div>
<!-- Sidebar End -->
<!-- Feed Starts -->
<div class="feed">
<div class="feed_header">
<h2>Home</h2>
</div>
<!-- Tweetbox Starts -->
<div class="tweetBox">
<form>
<div class="tweetbox__input">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
<input type="text" placeholder="What's happening">
</div>
<button class="tweetBox__tweetButton">Tweet</button>
</form>
</div>
<!-- Tweetbox Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
</div>
<!-- Feed Ends -->
<!-- Widget Starts -->
<div class="widgets">
<div class="widgest__input">
<span class="material-icons widgets__searchIcon"> search </span>
<input type="text" placeholder="search Twitter">
</div>
<div class="widgets__widgetContainer">
<h2>What's happening</h2>
<div class="card_container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="widgets__widgetContainer">
<h2>What's happening</h2>
<div class="card_container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Widget Ends -->
</body>
</html>

Answer 1

In your code if you remove overflow-x: auto from .feed and add
.feed_header {
position: sticky;
top: 0;
}
the 'Home' heading sticks to the top as you scroll.
Another way is to use
.feed_header {
position: fixed;
top: 0;
}
.feed {
margin-top: 16px;
}
This fixes the feed_header to the top of the screen as you scroll. The feed container then needs a bit of spacing at the top to ensure the feed_header isn't overlapping.

Answer 2

Remove overflow-x: auto; from .feed and add this to your css:
.feed_header, .tweetBox {
position: sticky;
top: 0;
}

Answer 3

Please insert the following code and make changes to your classes as well.
change from .feed-header to .feed_header
.feed_header {
border: 1px solid var(--twitter-background);
padding: 15px 20px;
/* I DONT KNOW HOW TO MAKE THIS STICK */
position: fixed; /*Code to add*/
top: 0; /*Code to add*/
}

Answer 4

Adding on to #John's answer - sometimes you may need to specify z-index:1 to have the element always on top while scrolling. Like this:
position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
z-index: 1;

Answer 5

Just add position: fixed for sidebar and feed header.
.feed_header, .sidebar {
position: fixed;
top: 0;
}