Issue
I am unsure why my Navigation bar isn't showing up on this RGB MMA website, At the Top of the website there should be a title, 'RGB MMA' with a fixed nagivation bar with 4 headings that are written in the html of the code, 'Home' 'About' 'Join us' and 'Time table' I will post my html and css code below, Thank you for any help!
<!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="style.css">
<title>RGB MMA</title>
</head>
<body>
<header>
<h1> RGB MMA</h1>
<nav>
<a href="#top"> home</a>
<a href="#top"> About</a>
<a href= "#join-us"> Join us!</a>
<a href="#Timetable"> Timetable</a>
</nav>
</header>
<main id="top">
<section class="feature image-mats">
<div class="post-meta">
<h2 class="post-meta_tagline"> Opening week</h2>
<h1 class="post-meta_heading">Gym Tour</h1>
<a class="post-meta_more" href="#">Read more</a>
</div>
</section>
<section id="Join-us" class="feature image-striking">
<div class="post-meta">
<h2 class="post-meta_tagline">January plans available</h2>
<h1 class="post-meta_heading">Join us today!</h1>
<a class="post-meta_more" href="#">Read more</a>
</div>
</section>
<section id="training-times" class="feature image-jits">
<div class="post-meta">
<h2 class="post-meta_tagline">Striking, grappling and MMA classes</h2>
<h1 class="post-meta_heading">Class timetable</h1>
<a class="post-meta_more" href="#">Read more</a>
</div>
</section>
</main>
<footer> RGB MMA @ 2024</footer>
</body>
</html>
CSS code
*
{
margin: 0;
padding: 0;
}
header
{
position: fixed;
}
.image-mats
{
background-image: url(https://dollamur.com/media/resized/620x345/wysiwyg/landing/lp_ma_block3_620x345.jpg) ;
}
nav
{
display: flex;
gap:2.3rem;
text-transform: uppercase;
align-items: center;
}
html, body, h1, h2
{
margin:0;
padding:0;
font-family: sans-serif
}
.feature
{
position: relative;
background-size: cover;
background-position: center;
height: 100vh;
}
section
{
display: block;
}
.post-meta
{
position:absolute;
bottom: 200px;
left: 3rem;
color:white;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.post-meta_tagline
{
text-transform: uppercase;
font-weight: 100;
opacity: 1;
font-size: 1.2rem;
}
.post-meta_heading
{
font-size:2.5rem;
text-transform: uppercase;
}
.post-meta_more
{
margin-top: 1.2rem;
display: inline-block;
max-width: 200px;
text-transform :uppercase;
font-weight:700;
font-size: .85rem;
letter-spacing: .1rem;
opacity: 1;
color:white;
border:2px solid white;
padding: 1rem 2rem;
text-decoration: none;
}
.image-striking
{
background-image: url(https://images.ctfassets.net/j4p65rou1yfw/4Pva6w46I8SRSDrOgtOMrF/a754139ac6589ce0f5b0897aa04323d9/ALTA_Training_-Chippendale_GP0785-COPY.webp);
}
.image-jits
{
background-image: url(https://images.squarespace-cdn.com/content/v1/5f8a56ba4e842e4e3ee85741/9fec8d22-92fe-4244-b80c-7e0274c84686/no-gi-brazilian-jiu-jitsu-classes-brazilian-jiu-jitsu-in-auburn.jpg) ;
}
footer
{
background: black;
text-align: center;
color: grey;
padding: 40px;
}
Solution
You have changed the stacking order by stating position: relative on .feature.
It's not really necessary so you can remove it. Alternatively, just give your header a z-index: 2.
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
//z-index:2;
background: white;
width: 100%;
}
.image-mats {
background-image: url(https://dollamur.com/media/resized/620x345/wysiwyg/landing/lp_ma_block3_620x345.jpg);
}
nav {
display: flex;
gap: 2.3rem;
text-transform: uppercase;
align-items: center;
}
html,
body,
h1,
h2 {
margin: 0;
padding: 0;
font-family: sans-serif
}
.feature {
//position: relative;
background-size: cover;
background-position: center;
height: 100vh;
}
section {
display: block;
}
.post-meta {
position: absolute;
bottom: 200px;
left: 3rem;
color: white;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.post-meta_tagline {
text-transform: uppercase;
font-weight: 100;
opacity: 1;
font-size: 1.2rem;
}
.post-meta_heading {
font-size: 2.5rem;
text-transform: uppercase;
}
.post-meta_more {
margin-top: 1.2rem;
display: inline-block;
max-width: 200px;
text-transform: uppercase;
font-weight: 700;
font-size: .85rem;
letter-spacing: .1rem;
opacity: 1;
color: white;
border: 2px solid white;
padding: 1rem 2rem;
text-decoration: none;
}
.image-striking {
background-image: url(https://images.ctfassets.net/j4p65rou1yfw/4Pva6w46I8SRSDrOgtOMrF/a754139ac6589ce0f5b0897aa04323d9/ALTA_Training_-Chippendale_GP0785-COPY.webp);
}
.image-jits {
background-image: url(https://images.squarespace-cdn.com/content/v1/5f8a56ba4e842e4e3ee85741/9fec8d22-92fe-4244-b80c-7e0274c84686/no-gi-brazilian-jiu-jitsu-classes-brazilian-jiu-jitsu-in-auburn.jpg);
}
footer {
background: black;
text-align: center;
color: grey;
padding: 40px;
}<header>
<h1> RGB MMA</h1>
<nav>
<a href="#top"> home</a>
<a href="#top"> About</a>
<a href="#join-us"> Join us!</a>
<a href="#Timetable"> Timetable</a>
</nav>
</header>
<main id="top">
<section class="feature image-mats">
<div class="post-meta">
<h2 class="post-meta_tagline"> Opening week</h2>
<h1 class="post-meta_heading">Gym Tour</h1>
<a class="post-meta_more" href="#">Read more</a>
</div>
</section>
<section id="Join-us" class="feature image-striking">
<div class="post-meta">
<h2 class="post-meta_tagline">January plans available</h2>
<h1 class="post-meta_heading">Join us today!</h1>
<a class="post-meta_more" href="#">Read more</a>
</div>
</section>
<section id="training-times" class="feature image-jits">
<div class="post-meta">
<h2 class="post-meta_tagline">Striking, grappling and MMA classes</h2>
<h1 class="post-meta_heading">Class timetable</h1>
<a class="post-meta_more" href="#">Read more</a>
</div>
</section>
</main>
<footer> RGB MMA @ 2024</footer>Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.