Tell us what’s happening:
Hi everyone! I’m writing code for Technical Documentation Page and get stuck when adding media queries. I can’t figure out why the navbar doesn’t span full the width of the page and it’s fixed when I scrolling down. Please help! Thank you!
Your code so far
/*HTML code*/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<link rel='stylesheet' href='styles.css'>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
<title>Technical Documentation Page</title>
</head>
<body>
<nav id='navbar'>
<header>
JS Documentation
</header>
<ul>
<li><a href="#Introduction" class='nav-link'>
Introduction
</a></li>
<li><a href="#What_you_should_already_know" class='nav-link'>
What you should already know
</a></li>
<li><a href="#Javascript_and_Java" class='nav-link'>
Javascript and Java
</a></li>
<li><a href='#Hello_World' class='nav-link'>
Hello World
</a></li>
<li><a href='#Variables' class='nav-link'>
Variables
</a></li>
<li><a href='#Declaring_variables' class='nav-link'>
Declaring variables
</a></li>
<li><a href='#Variable_scope' class='nav-link'>
Variable scope
</a></li>
<li><a href='#Global_variables' class='nav-link'>
Global variables
</a></li>
<li><a href='#Constants' class='nav-link'>
Constants
</a></li>
<li><a href='#Data_types' class='nav-link'>
Data types
</a></li>
<li><a href='#if...else_statement' class='nav-link'>
if...else statement
</a></li>
<li><a href='#while_statement' class='nav-link'>
while statement
</a></li>
<li><a href='#Function_declarations' class='nav-link'>
Function declarations
</a></li>
<li><a href='#Reference' class='nav-link'>
Reference
</a></li>
</ul>
</nav>
@media only screen and (max-width: 815px) {
#navbar ul{
height: 207px;
border-top:1px solid;
}
#navbar{position:absolute;
top:0;
padding:0;
margin:0;
width:100%;
max-height:275px;
border:none;
z-index:1;
}
#navbar li{position:relative;}
.main-section {
margin-left: -310px;
position:relative;
}
#Introduction{margin-top:300px;
}}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}}
html,body{min-width:290px;
font-family:nunito sans;
line-height:1.5;
text-align:justify;}
#navbar{
min-width:290px;
width:300px;
height:100%;
position:fixed;
top:0px;
left:-10px;
border-right: 1px solid black;
}
#navbar ul{overflow-y:auto;
overflow-x:hidden;
height:88%;
}
#navbar li{line-height:2.75;
font-size:16.5px;
list-style:none;
margin-left:-30px;
border-top:1px solid black;
padding-left:30px;
position:relative;
width:100%;
}
#navbar a{text-decoration:none;
color:black;
display:block;
}
#main-doc{
font-size:16px;
position:absolute;
padding:0px 30px;
margin-top:20px;
margin-left:310px;
margin-right:30px;
margin-bottom:110px;
}
#main-doc header{margin:0;
text-align:left;}
header{font-size:30;
font-weight:600;
margin:10;
text-align:center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: