
How can I make the header go on top of my sidebar?
At the moment the sidebar seems to be above the header, and since they're different colours and I've added a shadow, I'd like the header to be on top of the sidebar.
This is the CSS for the header and the sidebar:
header {
width: 100%;
margin-top: -2%;
margin-bottom: 2%;
background-color: var(--heading-colour);
text-align: center;
font-size: 25px;
box-shadow: 3px 3px 3px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
top: 0;
left: 0;
background-color: var(--theme-colour);
overflow-x: hidden;
padding-top: 100px;
box-shadow: 3px 3px 10px;
}
I'm very new to CSS so please excuse if I've missed something stupid.
Thanks!