I have written some code for a vertical navbar locked to the left-side of my page, but when I try to insert my main title, it puts it in the navbar, rather than the Main content of the webpage, How do I prevent this?
When I put an h1 tag in for my page header, I thought it would put it to the side in the white space, but it shoved it in my navbar as text.
(https://i.sstatic.net/V0G51iFt.png)
rat_in_soup27 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Update your css part:
ul{
font-size: 19px;
list-style: none;
margin:0;
padding:0;
background-color: #cfe2cf;
width: 230px;
height: 100%;
position: fixed;
overflow: auto;
top: 0;
left: 0;
}
Add .content-area:
.content-area{
padding-left: 250px;
}
in HTML please add:
<main class="content-area">
<h1>This is the content area</h1>
</main>
Here will be your output
The updated code seems correct. Define the width of the sidebar and give same padding from left to the content div