The solution doesn’t work for me. I tried adding fixed, top to the #header as well as the #navbar .
I tried copying the code from the example page (using F12), which is .nav as shown below:
My navbar is always at the top of the viewport as required. Any ideas?
<body>
<header id="header">
<nav id="navbar" class="nav">
<ul>
<li><a href="https://github.com/#" target="_blank">Github</a></li>
<li><a href="https://twitter.com/#" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/#" target="_blank">Youtube</a></li>
<li><a href="#">Checklist</a></li>
<li><a id="profile-link" href="#" target="_blank">About me</a></li>
</ul>
</nav>
</header>
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
z-index: 10;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
border-bottom: solid;
justify-content: flex-end;
background-color: #660022;
border-bottom-color: white;
border-width: 3px;
}
Have you used the link tag to link the css to the html?
I believe so, it looks like this:
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Portfolio</title>
</head>
Can you post your full html and css. It looks like you only posted one part of it.
Here it is:
<!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patua+One&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Portfolio</title>
</head>
<body>
<header id="header">
<nav id="navbar" class="nav">
<ul>
<li><a href="https://github.com/#" target="_blank">Github</a></li>
<li><a href="https://twitter.com/#" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/#" target="_blank">Youtube</a></li>
<li><a href="#">Checklist</a></li>
<li><a href="#" target="_blank">About me</a></li>
</ul>
</nav>
</header>
<main>
<section id="welcome-section">
<div>
<h1>William Pegg</h1>
<p>Aspiring Software and Web Developer</p>
</div>
</section>
<section class="projects" id="projects">
<h2>Websites</h2>
<div class="websites-grid-container">
<p id="site-title--1">Tribute Page</p>
<a href="../tribute_page/FCC-tribute_page.html" target="_blank"><img id="site-img--1" src="https://user-images.githubusercontent.com/80556233/170703406-19adbafb-ded3-41f8-8450-6be4e3fb7b2e.jpg" alt="Tribute Page Thumbnail"></a>
<p id="site-title--2">Survey Form</p>
<a href="../survey_form/FCC-survey_form.html" target="_blank"><img id="site-img--2" src="https://user-images.githubusercontent.com/80556233/170703401-0dbf3cc0-0409-4126-8bd0-cd421cec6a07.jpg" alt="Survey Form Thumbnail"></a>
<p id="site-title--3">Landing Page</p>
<a href="../landing_page/index_landing_page.html" target="_blank"><img id="site-img--3" src="https://user-images.githubusercontent.com/80556233/170703388-f1b0b89f-f6a6-47c0-8531-2a85f43a1770.jpg" alt="Landing Page Thumbnail"></a>
<p id="site-title--4">Technical Documentation</p>
<a href="../technical_documentation/technical_documentation.html" target="_blank"><img id="site-img--4" src="https://user-images.githubusercontent.com/80556233/170703404-83620824-7eef-4e74-844b-7f69bf5cee2e.jpg" alt="Technical Documentation Thumbnail"></a>
<p id="site-title--5">Cafe</p>
<a href="../sun_and_moon_cafe/index.html" target="_blank"><img id="site-img--5" src="https://user-images.githubusercontent.com/80556233/170716354-d24032db-e04b-40fa-8a9b-8a52c37695cc.jpg" alt="Cafe Thumbnail"></a>
</div>
</section>
<section class="projects">
<h3>Games</h3>
<div class="games-grid-container">
<p id="game-title--1">The Magical Quest - Unity C# (beta)</p>
<img id="game-img--1-a" src="https://user-images.githubusercontent.com/80556233/170703391-c425ea0b-7248-496f-9007-4b2d30953f3e.jpg" alt="Magical Quest Game Thumbnail 1">
<img id="game-img--1-b" src="https://user-images.githubusercontent.com/80556233/170703392-a250fe60-2fb6-4a5b-a032-354d7dc0a488.jpg" alt="Magical Quest Game Thumbnail 2">
<a href="C:/Users/willp/OneDrive/Projects/personal_site/web_games/block_breaker.html" target="_blank"><button id="play-button--1">PLAY</button></a>
<p id="game-title--2">S.P.A.W. - Unity C# (pre-alpha)</p>
<img id="game-img--2-a" src="https://user-images.githubusercontent.com/80556233/170703395-3faa84e2-2299-41e1-a72e-a24d52ce54dc.jpg" alt="Spaw Game Thumbanil 1">
<img id="game-img--2-b" src="https://user-images.githubusercontent.com/80556233/170703399-7270fcfa-b1a3-43ab-aecb-c1fab669dad4.jpg" alt="Spaw Game Thumbnail 2">
<a href="https://www.google.com/" target="_blank"><button id="play-button--2">PLAY</button></a>
<p id="game-title--3">Cyberpunk Text Adventure - Python (pre-alpha)</p>
<img id="game-img--3-a" src="https://user-images.githubusercontent.com/80556233/170703379-d4b49c8c-860c-4a0a-958a-fd4b309b9adf.jpg" alt="Cyberpunk Game Thumbnail 1">
<img id="game-img--3-b" src="https://user-images.githubusercontent.com/80556233/170703379-d4b49c8c-860c-4a0a-958a-fd4b309b9adf.jpg" alt="Cyberpunk Game Thumbnail 2">
<a><button id="play-button--3">PLAY</button></a>
</div>
</section>
</main>
</body>
</html>
@charset "utf-8";
/* CSS Document */
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
body {
background-color: black;
}
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgb(0 0 0 / 40%);
z-index: 10;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
border-bottom: solid;
justify-content: flex-end;
background-color: #660022;
border-bottom-color: white;
border-width: 3px;
}
#navbar ul {
list-style: none;
}
#navbar li {
display: inline-block;
background-color: #660022;
padding: 8px;
float:left;
top: 0;
margin-top: -10px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 10px;
}
#navbar a {
color: white;
}
/*--------------------------------------------------Welcome--*/
#welcome-section {
height: 500px;
min-width: 300px;
background: #660022;
border-style: solid;
border-width: thin;
border-radius: 5px;
border-color: white;
box-shadow: 0px -10px 50px -15px white;
margin-left: 20px;
margin-right: 20px;
margin-top: 100px;
position: relative;
}
#welcome-section h1 {
color: white;
font-family: 'Patua One', cursive;
text-align: center;
padding-top: 200px;
}
#welcome-section p {
color: white;
font-family: 'Courgette', cursive;
text-align: center;
text-decoration: underline;
}
/*-------------------------------------------------------Projects--*/
.projects {
height: 1200px;
min-width: 300px;
background: #660022;
border-style: solid;
border-width: thin;
border-radius: 5px;
border-color: white;
box-shadow: 0px -10px 50px -15px white;
margin-left: 20px;
margin-right: 20px;
margin-top: 100px;
margin-bottom: 100px;
position: relative;
}
.projects h2 {
color: white;
text-align: center;
font-family: 'Permanent Marker', cursive;
font-size: 40px;
}
.projects h3 {
color: white;
text-align: center;
font-family: 'Permanent Marker', cursive;
font-size: 40px;
}
.projects p {
color: white;
font-size: 20px;
}
/*--------------------------------------------------Websites--*/
.websites-grid-container {
display: grid;
grid-gap: 30px 50px;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 50px 300px 50px 300px;
grid-template-areas:
"title--1 title--2 title--3"
"image--1 image--2 image--3"
"title--4 title--5 empty"
"image--4 image--5 empty";
justify-content: space-evenly;
text-align: center;
margin-left: 100px;
margin-right: 100px;
}
.project-tile {
grid-area: empty;
}
#site-title--1 {
grid-area: title--1;
}
#site-title--2 {
grid-area: title--2;
}
#site-title--3 {
grid-area: title--3;
}
#site-title--4 {
grid-area: title--4;
}
#site-title--5 {
grid-area: title--5;
}
#site-img--1 {
grid-area: image--1;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
border-radius: 5px;
box-shadow: 0px 0px 10px 5px white;
}
#site-img--2 {
grid-area: image--2;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
border-radius: 5px;
box-shadow: 0px 0px 10px 5px white;
}
#site-img--3 {
grid-area: image--3;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
border-radius: 5px;
box-shadow: 0px 0px 10px 5px white;
}
#site-img--4 {
grid-area: image--4;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
border-radius: 5px;
box-shadow: 0px 0px 10px 5px white;
}
#site-img--5 {
grid-area: image--5;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
border-radius: 5px;
box-shadow: 0px 0px 10px 5px white;
}
#site-img--1:hover {
animation-name: img-hover;
animation-fill-mode: forwards;
animation-duration: 0.2s;
}
#site-img--2:hover {
animation-name: img-hover;
animation-fill-mode: forwards;
animation-duration: 0.2s;
}
#site-img--3:hover {
animation-name: img-hover;
animation-fill-mode: forwards;
animation-duration: 0.2s;
}
#site-img--4:hover {
animation-name: img-hover;
animation-fill-mode: forwards;
animation-duration: 0.2s;
}
#site-img--5:hover {
animation-name: img-hover;
animation-fill-mode: forwards;
animation-duration: 0.2s;
}
@keyframes img-hover {
to {
border-color: white;
box-shadow: 0px 0px 10px 10px white;
}
}
/*--------------------------------------------------Games--*/
.games-grid-container {
display: grid;
grid-gap: 30px 50px;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 50px 300px 300px 80px;
grid-template-areas:
"title--1 title--2 title--3"
"img--1-a img--2-a img--3-a"
"img--1-b img--2-b img--3-b"
"play-button--1 play-button--2 play-button--3";
justify-content: space-evenly;
text-align: center;
margin-left: 100px;
margin-right: 100px;
}
#game-title--1 {
grid-area: title--1;
}
#game-title--2 {
grid-area: title--2;
}
#game-title--3 {
grid-area: title--3;
}
#game-img--1-a {
grid-area: img--1-a;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
box-shadow: 0px 0px 10px 5px white;
}
#game-img--1-b {
grid-area: img--1-b;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
box-shadow: 0px 0px 10px 5px white;
}
#game-img--2-a {
grid-area: img--2-a;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
box-shadow: 0px 0px 10px 5px white;
}
#game-img--2-b {
grid-area: img--2-b;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
box-shadow: 0px 0px 10px 5px white;
}
#game-img--3-a {
grid-area: img--3-a;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
box-shadow: 0px 0px 10px 5px white;
}
#game-img--3-b {
grid-area: img--3-b;
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-color: silver;
box-shadow: 0px 0px 10px 5px white;
}
#play-button--1 {
background-color: white;
cursor: pointer;
border-style: solid;
border-radius: 5px;
border-color: white;
color: black;
width: 70%;
height: 40px;
font-size: 25px;
}
#play-button--2 {
background-color: white;
cursor: pointer;
border-style: solid;
border-radius: 5px;
border-color: white;
color: black;
width: 70%;
height: 40px;
font-size: 25px;
}
#play-button--3 {
background-color: white;
cursor: pointer;
border-style: solid;
border-radius: 5px;
border-color: white;
color: black;
width: 70%;
height: 40px;
font-size: 25px;
}
#play-button--1:hover {
animation-name: play-game;
animation-duration: 0.1s;
animation-fill-mode: forwards;
}
#play-button--2:hover {
animation-name: play-game;
animation-duration: 0.1s;
animation-fill-mode: forwards;
}
#play-button--3:hover {
animation-name: play-game;
animation-duration: 0.1s;
animation-fill-mode: forwards;
}
@keyframes play-game {
to {
color: red;
background-color: black;
}
}
}
It has something to do with the @media query. If the CSS code is nested inside it doesn’t register the navbar being at the top, if I move the code outside the squiggly brace it works and I get all ticks in the checklist.
Try searching your query about your game, in the github. I think I see a similar project there.
Regards,DA2
system
April 24, 2023, 12:43am
9
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
