Hello everyone I need your help about the fixed header of my landing product
<header id="header">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo">
<nav id="nav-bar">
<ul>
<li><a href="#featured" class="nav-link">Features</a></li>
<li><a href="#video" class="nav-link">How it works</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
CSS
header{
padding: 1.5rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed; /*however it is not working */
}
nav#nav-bar ul{
display: flex;
}
nav#nav-bar ul li{
margin-left: 2rem;
}
nav#nav-bar ul li a{
color: #111;
}
#header-img{
width: 15rem;
margin-left: -1rem;
}
fram
December 21, 2019, 8:55pm
2
It would be helpful to be able to see your full code, or Codepen, if you have one so we can test it. But I think the problem might be that you haven’t specified WHERE your header should be fixed. If an element has a position: fixed
, or position: absolute
, you have to specify where it will be positioned using top
, right
, bottom
, and left
.
got it thanks, your explanation was helpful
media query hello please help me I want my technical documentation work on small devices like phone,
<nav id="navbar">
<header>
<h2>Java Documentation</h2>
</header>
<ul>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#what_you_should_already_know">What you should already know</a></li>
<li><a class="nav-link" href="#identifying_the_features_of_java">Identifying the Features of Java</a></li>
<li><a class="nav-link" href="#java_architecture">Java Architecture</a></li>
<li><a class="nav-link" href="#components">Components</a></li>
<li><a class="nav-link" href="#hello_world">Hello world</a></li>
<li><a class="nav-link" href="#variable">Variable</a></li>
<li><a class="nav-link" href="#method">Methods</a></li>
<li><a class="nav-link" href="#example">Example</a></li>
<li><a class="nav-link" href="#reference">Reference</a></li>
</ul>
</nav>
here is the media query
.container {
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 2fr;
grid-template-rows: auto 2fr auto;
grid-gap: 1px;
grid-template-areas:
"advert content"
"advert content"
"advert content";
}
@media (min-width: 400px){
.container{
grid-template-columns:auto 2fr;
grid-template-rows: auto 2fr auto;
grid-template-areas:
"advert content"
"advert content"
"advert content";
}
}
@media (min-width: 200px){ //this one not working help me to fix it
.container{
grid-template-columns: auto 2fr;
grid-template-rows: auto 2fr auto;
grid-template-areas:
"advert advert"
"content content"
"content content";
}
}