@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
#main-doc {
background-color: #f1f1f1;
justify-content: space-between;
font-family: Verdana, sans-serif;
font-size: 1em;
}
.main-section{
max-width: 70%;
padding: 20px;
/*margin-left:320px;*/
border-left: 3px solid silver;
float: right;
}
header{
font-size: 1.5em;
}
#navbar {
margin: 20px;
max-width: 30%;
padding-right: 10px;
float:left;
}
#navbar header {
position:fixed;
padding: 10px;
margin:0.5rem auto;
}
#navbar ul{
list-style-type: none;
margin-top: 3rem;
padding: 0;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border-bottom: 1px solid silver;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44
Challenge: Build a Technical Documentation Page
Link to the challenge: