i am having a problem in Personal Portfolio webpage… the error is showing like (Your #navbar
element should always be at the top of the viewport.) can’t understand what the problem is. HELP PLSS!!..
My code soo far html
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Personal Portfolio Webpage</title>
</head>
<body>
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
<a href="#welcome-section">About</a>
</li>
<li>
<a href="#projects">Work</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Hey I am Mimic</h1>
<p>a web developer</p>
</section>
<section id="projects" class="projects-section">
<h2 class="projects-section-header">These are some of my projects</h2>
<div class="projects-grid">
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Tribute Page
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Random Quote Machine
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/wgGVVX"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
JavaScript Calculator
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/mVEJag"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Map Data Across the Globe
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/wGqEga"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Wikipedia Viewer
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/KzXQgy"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Tic Tac Toe Game
<span class="code">/></span>
</p>
</a>
</div>
<a
href="https://codepen.io/FreeCodeCamp/"
class="btn btn-show-all"
target="_blank"
>Show all<i class="fas fa-chevron-right"></i
></a>
</section>
<a
id="profile-link"
href="https://github.com/freecodecamp"
target="_blank"
class="btn contact-details"
><i class="fab fa-github"></i> GitHub</a>
</body>
</html>
css
@media screen and (max-width: 400px) {
nav {
text-align: center;
}
}
Help Plss!!!
Add to your css code ‘#navbar ’ as a selector with a property ‘position’ set to ‘sticky’ and property ‘top’ set to ‘0’:
#navbar {
property: value;
property: value;
}
No it’s not happening …
Here’s the new code html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Personal Portfolio Webpage</title>
</head>
<body>
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
<a href="#welcome-section">About</a>
</li>
<li>
<a href="#projects">Work</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Hey I am Mimic</h1>
<p>a web developer</p>
</section>
<section id="projects" class="projects-section">
<h2 class="projects-section-header">These are some of my projects</h2>
<div class="projects-grid">
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Tribute Page
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Random Quote Machine
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/wgGVVX"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
JavaScript Calculator
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/mVEJag"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Map Data Across the Globe
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/wGqEga"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Wikipedia Viewer
<span class="code">/></span>
</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/KzXQgy"
target="_blank"
class="project project-tile"
>
<img
class="project-image"
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
alt="project"
/>
<p class="project-title">
<span class="code"><</span>
Tic Tac Toe Game
<span class="code">/></span>
</p>
</a>
</div>
<a
href="https://codepen.io/FreeCodeCamp/"
class="btn btn-show-all"
target="_blank"
>Show all<i class="fas fa-chevron-right"></i
></a>
</section>
<a
id="profile-link"
href="https://github.com/freecodecamp"
target="_blank"
class="btn contact-details"
><i class="fab fa-github"></i> GitHub</a>
</body>
</html>
[quote="DobarBREND, post:2, topic:585622, full:true"]
Add to your css code '#navbar' as a selector with a property 'position' set to 'sticky' and property 'top' set to '0':
#navbar {
property: value;
property: value;
}
Css
@media screen and (max-width: 400px) {
#nav {
text-align: center;
position: absolute;
margin-top: 0;
margin-left: 0;
}
}
I didn’t say to add code in the @media query, but to css file, which means add it above the media as I have shown. #navbar is an id selector and you have it. You don’t have any ‘nav’ id in your code. So, use #navbar:
<nav id="navbar" class="nav">
this is a snippet from your code. Here is id=“navabar”, and because of that you should use ‘#navbar ’ as a selector in CSS file.
Below is the example of what you should do above the @media query in your code
#navbar {
property: value;
property: value;
}
‘position’ is an attribute, and “sticky” is its value,
‘top’ is an attribute, and “0” is its value.
Ok I will try and let you know … thank u for ur help …
bonjour!! i have already given it
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
<a href="#welcome-section">About</a>
</li>
<li>
<a href="#projects">Work</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
@media screen and (max-width: 400px) {
#nav {
text-align: center;
}
}
css
@media screen and (max-width: 400px) {
#nav {
text-align: center;
}
}
alos i didn’t understand what do you mean by : “‘position’ is an attribute, and “sticky” is its value,
‘top’ is an attribute, and “0” is its value.”
system
Closed
July 19, 2023, 12:47pm
7
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.