CODEWITHSUNDEEP
htmlcssnavbar
Tog Porter
Tog Porter

Reputation: 441

Navbar not staying in place when using position: fixed;

I am trying to stop my Navbar from scrolling with the rest of the page.

The relevant part of the html code is:

     <body>
                    <?php include("includes/navbar.php"); ?>

                    <div class="container">
                        <div class="placeholder">
                        <img class="img1" src="images/logo.gif" alt="BCIC Logo">
<h1>Text Here</h1> 
    <p>More paragraphs here</p>
                        </div>
                    </div>
            <script>
            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
            </script>
        </body>

html code for navbar.php:

<div class="topnav" id="myTopnav">
    <!-- show menu icon on small screen-->
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        <?php
        if ($page == 6){
        echo '<a href="contact.php" class="active">Contact us</a>';
      }
      else{
      echo '<a href="contact.php">Contact</a>';
      }
          if ($page == 5){
        echo '<a href="join.php" class="active">Get Involved</a>';
      }
      else{
      echo '<a href="join.php">Get Involved</a>';
      }
        if ($page == 4){
        echo '<a href="forms.php" class="active">Forms</a>';
      }
      else{
      echo ' <a href="forms.php">Forms</a>';
      }
      if ($page == 3){
        echo '<a href="documents.php" class="active">Documents</a>';
      }
      else{
      echo ' <a href="documents.php">Documents</a>';
      }
       if ($page == 2){
        echo ' <a href="about.php" class="active">About</a>';
      }
      else{
      echo ' <a href="about.php">About</a>';
      }
       if ($page == 1){
            echo ' <a href="index.php" class="active">Home</a>';
      }
      else{
      echo ' <a href="index.php">Home</a>';
      }
      ?>
 </div>

The CSS is:

    .container{
        /* Main content */
         width: 100%;
        margin-top: 5px; /* Add a top margin to avoid content overlay */
    }
    .placeholder{
        display: block;
        width: 100%;
        padding: 20px 0px;
        background-color: #846da2;
        text-align: center;
        }

        .topnav {
           background-color: #ffffff;
           opacity: 0.8;
            overflow: hidden;
              }
        .topnav a {
            float: right;
            display: block;
            color: #846da2;
            text-align: center;
            padding: 14px 16px 10px 16px;
            text-decoration: none;
            font-weight: bold;
            font-size: 11pt;
           }
        .topnav a:hover {
            border-width: 0px 0px 3px 0px;
            border-style: solid;
            border-color: #846da2;
            background-color: #d4c0ed;
            color: #9754ef;
        }
.active {
    border-width: 0px 0px 3px 0px;
    border-style: solid;
    border-color: #846da2;
     background: url('transparent.png');
    color: #000000;
 }

All of that puts the Navbar at the top right of the page and above the placeholder div, but it scrolls up with the rest of the page.

After a lot of searching and experimentation it seems as if the CSS should be changed to:

    .topnav {
       background-color: #ffffff;
       opacity: 0.8;
        overflow: hidden;
        position: fixed;
        z-index: 20;
}

But that does not work correctly. Three things happen, two of which are wrong The navbar becomes fixed (correct), but it moves to the top left of the page (wrong) and moves down inside the placeholder div (wrong).

I have tried many combinations in the CSS but cannot get the navbar to remain fixed AND at the top right of the page above the placeholder div.

I am totally stumped and have spent hours trying to get this right. Can anyone help please?

Best wishes

Tog

Upvotes: 0

Views: 964

Answers (1)

Alessio
Alessio

Reputation: 3610

If you want the navbar to be on the right just add:

.topnav {
   right: 0;
}

Since you have the position: fixed, you can add top,left,right,bottom to change positioning of the element.

I would also add:

.topnav {
    top: 0;
    width: 100%;
}

To make it looks nicer.

In order to place it at the very top of the page, over the div, change:

.container{
   margin-top: 50px;
}

Here you can find a working codepen.

Hope this solves all your problems.

Upvotes: 1

Related Questions