Currently, I am in the process of creating a technical documentation project through freecodecamp. Here is the code that I have been working on:
#main-doc {
margin-left: 270px;
}
.heading {
font-size: 1.7rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
li {
padding-bottom: 5px;;
}
.para, li {
font-size: 1.1rem;
margin-left: 20px;
}
code {
font-size: 1.05rem;
font-family: sans-serif;
padding-left: 60px;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0.05);
display: block;
}
#navbar {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 250px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #f6f3f3; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
.nav-link {
display: block;
padding: 12px 0 12px 8px;
font-size: 1.05rem;
text-decoration: none;
border-bottom: 2px solid rgba(0, 0 ,0 ,0.5);
width: 250px;
}
nav header {
padding: 10px 0 10px 8px;
font-size: 1.5rem;
background-color: blueviolet;
color: aliceblue;
}
@media (max-width: 600px) {
#navbar {
overflow: hidden;
background-color: white;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
right: 0;
left: 0;
width: 100%; /* Full width */
}
.nav-link {
display: block;
padding: 12px 0 12px 8px;
font-size: 1.05rem;
text-decoration: none;
border-bottom: 2px solid rgba(0, 0 ,0 ,0.5);
width: 250px;
}
nav header {
padding: 10px 0 10px 8px;
font-size: 1.5rem;
background-color: blueviolet;
color: aliceblue;
}
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header class="heading">Introduction</header>
[...]
...
</section>
[...]
</main>
<nav id="navbar">
<header>JS Documentation</header>
[...]
</nav>
</body>
</html>I have a concern about the media query located at the end of the CSS file. When the screen size is reduced, my intention is for the navigation bar on the left to remain at the top. However, it seems like it's not functioning as expected. Can someone advise on what could be causing this issue?
Many thanks!