CODEWITHSUNDEEP
htmlcssnavigationheader
Cris J
Cris J

Reputation: 11

Trying to stick my header to the top of the page

I'm stuck on my header. I want my navigation bar to display over my header image and I don't understand why but there is a gap between the header image and the top of the page itself.

Here's what it looks like now (the nav bar has a transparent background):

the image is here

And this is what I'm trying to achieve:

here's an image

I believe the problem may be coming form the properties I've set on html and body but I'm not quite sure.

Here are my code and the CSS

html{
    height: 100vh;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
body {
    box-sizing:border-box;
    display:block;
    margin: 0 auto;
    padding: 0;
    min-height: 100%;
    background-color: transparent;
  font-family: 'Montserrat';
    }

/* NAV BAR */

.main-head {

    box-sizing:border-box;
    padding:0;
    margin:0;
    position:sticky;
    top:0;
    background:transparent !important;

}
.main-head nav a {
    color:black;
    font-size:1rem;
    text-transform:uppercase;
    text-decoration:none;
}
.main-head nav ul{
    list-style-type:none;
    display:flex;
    flex: 3 1 40rem;
    justify-content:space-around;
    align-items:center;
}
.main-head nav {
    min-height:10vh;
    display:flex;
    align-items:center;
    width:90%;
    margin:auto;
    padding:0.5rem;
    
}
/* HEADER IMAGE */

.bonjour {
    height:100vh;
    width:100%;
    background:url("images/banniere_french1.png");
    background-size:cover;
    background-position:bottom center;
    
}
<header class="main-head">
   <title><?php echo $title; ?></title> 
    <nav>
    <a href="<?php echo '?page=home&css='.$css ?>"><img src="images/mona.png" class="logo"/></a>
    
        
        <ul>
            
         <li><?php echo '<a href="?page=Images de fond&css='.$css.'&titre=Images de fond"></a>' ?>
           <?php echo '<a href="?page=Images de fond&css='.$css.'">Images de fond</a>' ?></li>
           
        <li><?php echo '<a href="?page=Le colonnage&css='.$css.'&titre=colonnage"></a>' ?>
         <?php echo '<a href="?page=Le colonnage&css='.$css.'">colonnage</a>' ?></li>
         
        <li><?php echo '<a href="?page=Filtres&css='.$css.'&titre=Filtres"></a>' ?>
         <?php echo '<a href="?page=Filtres&css='.$css.'">Filtres</a>' ?></li>
         
        <li><?php echo '<a href="?page=liens&css='.$css.'&titre=Liens"></a>' ?>
        <?php echo '<a href="?page=liens&css='.$css.'">Liens</a>' ?></li>
        
        </ul>
    </nav>

</header>
<section class="bonjour">
</section>

Upvotes: 1

Views: 67

Answers (2)

selfagency
selfagency

Reputation: 1578

In your CSS, remove:

body {
  display: block;
}

And add:

body {
  position: relative;
}

Upvotes: 1

AdriSolid
AdriSolid

Reputation: 2825

Try replacing in your main-head class position: sticky per position: absolute and adding width: 100%

Upvotes: 0

Related Questions