I am trying to make a simple social network website. I am using a top navigation panel and a side navbar.
The problem I am facing is that I am not able to add any components in the blank area that you are able to see in the image.
This is my HTML body with the CSS I am using:-
//css code for sidebar
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #D96AA7;
--secondary-color: #422C73;
--complimentary-color: #88BFB5;
--contrast-color: #F2E527;
--light-color: #D2A9D9;
}
.container {
background: #191919;
min-height: 100vh;
font-family: Montserrat, sans-serif;
}
nav a {
font-size: 40px;
color: #fff;
text-decoration: none;
padding: 20px;
text-align: center;
}
nav {
position: fixed;
left: 0;
z-index: 50;
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background: var(--secondary-color);
}
section {
position: absolute;
top: 0;
height: 100vh;
width: 0;
opacity: 0;
transition: all ease-in .5s;
display: flex;
justify-content: center;
align-items: center;
}
/* Styles applied on trigger */
section:target {
opacity: 1;
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
section:target h1 {
opacity: 0;
animation: 2s fadeIn forwards .5s;
}
#first {
background:var(--primary-color);
}
#second {
background: var(--complimentary-color);
}
#third {
background: var(--contrast-color);
}
#fourth {
background: var(--light-color);
}
@keyframes fadeIn {
100% { opacity:1 }
}
//css code for top navigation
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}<body>
<style>
a {
text-decoration: none;
color: white;
}
</style>
<!--this is the top navigation bar-->
<div class="topnav" id="myTopnav">
<a href="/painting.jpg" class="active">Home</a>
<a href="/dancing.png">Chit-Chat</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--this is side navbar-->
<nav>
<a href="#first"
><abbr title="PROGRAMMING"
><img src="assets/programming.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#second"
><abbr title="SINGING"
><img src="assets/singing.jpg" height="100" ,width="100" /></abbr
></a>
<a href="#third"
><abbr title="DANCING"
><img src="assets/dancing.png" height="100" ,width="100" /></abbr
></a>
<a href="#fourth"
><abbr title="PAINTING"
><img src="assets/painting.jpg" height="100" ,width="100" /></abbr
></a>
</nav>
<div class="container">
<section id="first">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
<section id="second">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
<section id="third">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
<section id="fourth">
<div class="outer">
<div class="inner">
<label><a href="/index.html">Back</a></label>
</div>
</div>
</section>
</div>
</body>my side navbar opens a div with a close button for now in it as you might be able to see
but I don’t understand where I should put the code I want in the blank space.
if I am adding it after my side navbar code it is displaying it in a space under the blank area.
I am using the code for the side navbar from the internet, that is why i am not able to figure it out
pls help
