How can I create a topnav beside a sidenav I've already created?

Question

For context, I'm practically making a reskin of Twitter. At least as of right now, that's what it is. I've created a sidenav already, and I want to add a topnav beside it. Something like this: image

I want to put "you - following - discover | profile" as the topnav.

I tried to go off of w3schools code for a topnav, but it didn't work. It just had a gray bar at the top with no buttons.

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

For context, I didn't add any buttons or change them originally but I don't think that would change anything. The sidenav is ontop of the topnav, and I want the topnav to be beside it.

My sidenav html:

<div class="sidenav">
        <img src="./img/Aero Textual Icon Green.png" class="icon-sidenav" alt="Aero Icon Top Sidenav" style="cursor:default">

        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">home</span>Timeline</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">notifications</span>Notifications</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">near_me</span>Explore</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">bookmark</span>Saved</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">sms</span>Messages</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">person</span>Profile</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">settings</span>Settings</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">more_horiz</span>More</a>

        <a href="#"><button>Post</button></a>
    </div>

The pages css (All of its a sidenav and topnav right now):

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' -25,
  'opsz' 48
}

.material-symbols-rounded-high {
  font-variation-settings:
  'FILL' 0,
  'wght' 700,
  'GRAD' 0,
  'opsz' 48
}

body {
    font-family: 'Coda', cursive;
    background-color: #212121;
    color: #fff;
}

.main {
    margin-left: 160px;
    font-size: 28px; 
    padding: 0px 10px;
}

.sidenav button {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 23px;
    margin-top: 25px;
    margin-left: 163px;
    border-radius: 50px;
    width: 230px;
    height: 55px;
    background-color: #2EFFA8;
    text-align: center;
    color: #212121;
    border: none;
    text-decoration: none;
}

.sidenav button:hover {
    background-color: #27d88e;
}

.icon-sidenav {
    padding-top: 30px;
    padding-bottom: 35px;
    width: 170px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.inline-icon {
    vertical-align: bottom;
    font-size: 32px !important;
    padding-right: 15px;
}

.sidenav {
    height: 100%;
    width: 550px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #181818;
    overflow-x: hidden;
    padding-top: 20px;
}
  
.sidenav a.sidebarbtn {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 200px;
    text-decoration: none;
    font-size: 22px;
    color: #ffffff;
    display: block;
}

.sidenav a:hover {
    color: #2EFFA8;
    cursor: pointer;
}

.sidenav a:active {
    color: #2EFFA8;
}

.sidenav a.split {
    float: left;
    color: white;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
  
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

This question doesn't work because the result is for topnav above sidenav, I want the topnav to the right of the sidenav

I can't find a question asking to put a topnav beside a sidenav, I've looked on here and around 5 other places.

Answer 1

you can change your top nav to display:flex, and justify its content to center, as follwing:

or you can make your layout more strict by using display grid and modifying the follwing (recommended):

.sidenav {
    height: 100%;
    width: 550px;
    /* position: fixed; */
    background-color: #181818;
    overflow-x: hidden;
    padding-top: 20px;
    /*The following line says that this element spans for two rows*/
    grid-row: 1/-1;
}

body{
    display: grid;
    padding: 0 15% 0 15%;
    grid-template-columns: min-content max-content;
    grid-template-rows: min-content max-content;
    justify-content: left;
}

the result would be something like:

and then to make nav bars fixed in place, you can add another div after the top nav and make it scroll on overflow-y and you can hide its scrollbar if u want to.

finally i think grid would be the best choice to achieve your overall goal for the layout.

plz upvote if this helps.

Thanks