I am creating a Twitter clone but the sidebar moves down when I create the main page contents. I tried using Position - fixed and relative but still the same issue. Before I added the main page content, the sidebar was correctly positioned (please see screenshot) but as soon as its added, the sidebar moves down(please see screenshot).
I'm using Grid to create the three columns to give the Twitter aesthetics.
What am I doing wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.twitter-logo {
height: 28px;
filter: invert(52%) sepia(50%) saturate(2964%) hue-rotate(179deg) brightness(95%) contrast(97%);
margin-left: 25px;
}
.left-sidebar {
/* position: fixed; */
position: relative;
}
.navbar-brand:hover {
background: rgba(29, 161, 242, 0.1);
border-radius: 50%;
color: #1da0f2;
margin-right: 23px;
/* padding: 20px; */
}
.left-sidebar-menu {
font-size: 20px;
cursor: pointer;
font-weight: 700;
display: flex;
color: rgb(15, 20, 25);
font-family: 'Times New Roman', Times, serif;
}
.left-sidebar-menu-icon {
align-items: flex-start;
height: 26px;
margin-right: 20px;
}
.nav-item {
padding: 10px;
margin: 2px 2px;
}
.nav-item:hover {
background: rgba(29, 161, 242, 0.1);
border-radius: 20px;
color: #1da0f2;
}
/* --------------------------------MAIN PAGE------ */
.main-page-header {
font-size: 18px;
height: 48px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
.main-page-header-profile-picture {
border-radius: 50%;
height: 48px;
}
.main-page-input {
border: 0 solid black;
}
.main-page-input-box {
padding-top: 10px;
border-bottom: 1px solid #e6e6e6;
}
.main-page-tweet-box {
margin-top: -5px;
word-wrap: break-word;
word-break: break-all;
outline: none;
}
.main-page-tweet-box:focus main-page-tweet-box:hover {
outline: none !important;
box-shadow: none;
border: 0;
}
.main-page-tweet-box {
height: 130px;
border: 0;
margin-top: -10px;
}
::placeholder {
font-family: 'Open Sans', sans-serif;
opacity: 1;
font-size: 18px;
/* position: absolute;
margin-top: 10px; */
}
.main-page-input-privacy {
/* display: flex;
align-items: flex-start; */
display: inline-block;
color: #1da1f2;
cursor: pointer;
}
.main-page-input-privacy-icon,
main-page-input-privacy-text {
display: inline;
}
/* .main-page-input-privacy i{
float: left;
} */
.main-page-input-icons {
display: flex;
justify-content: space-between;
margin-left: -35PX;
}
.main-page-input-icons-ul {
list-style-type: none;
margin-left: 5px;
}
.main-page-input-icons li {
display: inline;
/* width: 300px; */
list-style: none;
color: #1da1f2;
font-size: 20px;
margin: 0 2px;
height: 38px;
width: 38px;
cursor: pointer;
}
.main-page-tweet-button {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
color: white;
background-color: #1da1f2;
text-align: center;
cursor: pointer;
/* width: 75px; */
/* height: 30px; */
border: none;
outline: none;
opacity: 0.5;
}
/* .main-page-input form {
} */
/* .left-sidebar-menu-icon-active using js {
filter: invert(52%) sepia(50%) saturate(2964%) hue-rotate(179deg) brightness(95%) contrast(97%);
} */
/* .left-sidebar-menu-btn {
} */
.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 {
flex: 1;
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;
}
.tweet {
display: flex;
margin-bottom: 4px;
border-bottom: 1px solid rgb(47, 51, 54);
cursor: pointer;
}
.tweet-author-image {
border-radius: 50%;
height: 48px;
width: 48px;
margin-right: 12px;
}
.tweet-feed-content {
margin-bottom: 15px;
padding-bottom: 12px;
}
.tweet-header {
display: flex;
font-size: 15px;
font-weight: 400;
}
.tweet-author-username {
font-family: 'Times New Roman', Times, serif;
/* color: rgb(231, 233, 234); */
}
.tweet-author-handle {
color: rgb(113, 118, 123);
}
.tweeted-time {
color: rgb(113, 118, 123);
}
.engagement-icons-ul {
display: flex;
list-style-type: none;
justify-content: space-between;
margin-left: -30px;
width: 400px;
}<div class="container">
<div class="row">
<div class="col-3 navbar">
<nav>
<div class="left-sidebar">
<a class="navbar-brand" href="#">
<img src={ % static 'network/images/brand.svg' %} alt="Twitter logo" class="twitter-logo">
</a>
<ul class="nav flex-column left-sidebar-menu mb-4 mt-2">
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/all-post.svg' %} alt="All post" class="left-sidebar-menu-icon"> All Post
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/following.svg' %} alt="Following" class="left-sidebar-menu-icon"> Following
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/notifications.svg' %} alt="Notifications" class="left-sidebar-menu-icon"> Notifications
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/messages.svg' %} alt="Messages" class="left-sidebar-menu-icon"> Messages
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/profile.svg' %} alt="Profile" class="left-sidebar-menu-icon"> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/more.svg' %} alt="More" class="left-sidebar-menu-icon"> More
</a>
</li>
<button class="btn btn-primary rounded-pill my-2 py-3">Tweet</button>
</ul>
</div>
</nav>
</div>
<div class="col-5">
<div class="main-page-header mt-3 sticky-top">Home</div>
<div class="main-page-input">
<!-- <form class="d-flex flex-column"> -->
<div class="row">
<div class="col-2 main-page-header-profile-picture">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" class="main-page-header-profile-picture" alt="profile-picture" />
</div>
<div class="col-10">
<div class="main-page-input-box">
<div>
<textarea name="tweet-box" id="" class="form-control main-page-tweet-box text-wrap" cols="30" rows="10" placeholder="What's happening"></textarea>
<!-- <input type="text" class="form-control main-page-tweet-box text-wrap" id="exampleFormControlInput1" placeholder="What's happening"> -->
</div>
<div class="main-page-input-privacy pb-2 mt-3">
<i class="fas fa-globe-americas main-page-input-privacy-icon"></i>
<span class="ain-page-input-privacy-text ml-2">Everyone can reply</span>
</div>
</div>
<div class="main-page-input-icons mt-3">
<ul class="main-page-input-icons-ul">
<li><i class="fa-solid fa-image"></i></li>
<li><i class="fa-solid fa-square-poll-horizontal"></i></li>
<li><i class="fa-solid fa-face-grin"></i></li>
<li><i class="fa-regular fa-calendar"></i></li>
<li><i class="fa-solid fa-location-dot"></i></li>
</ul>
<button type="submit" class="btn btn-primary rounded-pill px-4 main-page-tweet-button"><strong>Tweet</strong></button>
</div>
</div>
</div>
<!-- </form> -->
</div>
<div class="tweet-feed">
<div class="tweet">
<img src="http://placeimg.com/140/140/people" alt="author profile picture" class="tweet-author-image" />
<div class="tweet-feed-content">
<div class="tweet-header">
<a href="#" class="tweet-author-username">Nick Huber</a>
<div class="tweet-author-handle">@sweatystartup</div>
<div class="tweeted-time">8h</div>
</div>
<div class="tweet-content">
<div class="tweet-created-content">It is a wonderful day</div>
</div>
<div class="engagement-icons">
<ul class="engagement-icons-ul">
<li><i class="fa-regular fa-comment"></i></li>
<li><i class="fa-solid fa-retweet"></i></li>
<li><i class="fa-regular fa-heart"></i></li>
<li><i class="fa-solid fa-arrow-up-from-bracket"></i></li>
</ul>
</div>
</div>
</div>
<div class="tweet">
<img src="http://placeimg.com/140/140/animals" alt="author profile picture" class="tweet-author-image" />
<div class="tweet-feed-content">
<div class="tweet-header">
<a href="#" class="tweet-author-username">Randall</a>
<div class="tweet-author-handle">@RandallKanna</div>
<div class="tweeted-time">18h</div>
</div>
<div class="tweet-content">
<div class="tweet-created-content">Hey friends</div>
<img src="http://placeimg.com/300/300/tech" alt="tweeter feed" />
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
TODO
</div>
</div>
</div>