How do I make a nav element be at the top of the view port.
set the position property to fixed and the top property to 0
Thank you very much.
1 Like
I just tried and it didn’t work.
okay, you may need to show us all your code now.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<img src="https://ffg.org" id="header-img">
<nav id="nav-bar">
<a class="nav-link" href="#f1">Features</a>
<a class="nav-link" href="#f2">How It Works</a>
<a class="nav-link" href="#f3">Pricing</a>
</nav>
</header>
<section id="f1"></section>
<section id="f2"></section>
<section id="f3"></section>
<video id="video" src="https://hfc.org"></video>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" placeholder="enter your email address" name="email">
<input id="submit" type="submit">
</form>
</body>
</html>
styles.css
"
@media (max-width: 300px) {
img{
width: 200px;
}
}
#nav-bar{
position: fixed;
top: 0;
}
-
Failed:Your
#nav-barshould always be at the top of the viewport. -
Failed:Your Product Landing Page should use at least one media query.
-
Failed:Your Product Landing Page should use CSS Flexbox at least once.
Hello Nabil
Basically tell me the actual problem…
So i help you.
- Failed:Your
#nav-barshould always be at the top of the viewport. - Failed:Your Product Landing Page should use at least one media query.
- Failed:Your Product Landing Page should use CSS Flexbox at least once.
Don’t worry
first take nav tag and if you want to fix at the top use position fixed…
and second way but im not sure that’s working is display flex , align-items:flex-start;
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
You have not linked the correct stylesheet name. You need to link styles.css not style.css
Thank you vrey much.
1 Like