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;}
}
I can't find a question asking to put a topnav beside a sidenav, I've looked on here and around 5 other places.
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