Header not at top of the page-CodePudding

I try to clone a website's front end to improve my knowledge. The problem is Header is not at the top of this website. Im new to bootstrap but i have to control it. I did reset the CSS. It's my first time here, I'm appreciated your help.

body {
    margin: 0;
    padding: 0;
    }
    
*{
    padding: 0;
    margin: 0;
}

.img {
    width: 221px;
    height: 56px;
}

 <div id="logo" >
        <img  src="assets/img/unknown.png">
        <a href="#" >
            <i ></i>
        </a>
    </div>
    <div  id="sidebar">
        <!--sidebar start-->
            <a href="index.html" ></a>
                <div >
                    <div >
                        <a href="#"  data-bs-toggle="dropdown"><i ></i>Admin</a>
                        <div >
                            <a href="#" >A</a>
                            <a href="#" >B</a>
                            <a href="#" >C</a>
                        </div>
                    </div>
                    <a href="#" ><i ></i>Cập nhật PO</a>
                    <a href="#" ><i ></i>Phân loại PO</a>
                    <a href="#" ><i ></i>Ước tính rebate</a>
                    <a href="#" ><i ></i>Cập nhật rebate</a>
                    <a href="#" ><i ></i>Báo cáo</a>
                    <a href="#" ><i ></i>Tra cứu thông tin</a>
                    <a href="#" ><i ></i>Hướng dẫn sử dụng</a>
                </div>        
<!--sidebar end-->
    </div>
    <header >
        <h1>CHƯƠNG TRÌNH REBATE</h1>
        <i ></i>
        <img  src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
        <span >TuNTC23</span>
        <hr>
    </header>

CodePudding user response：

.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky; 
  top: 0; 
  width: 100%; 
}

CodePudding user response：

I have moved some code around and managed to get it looking somewhere close, make sure you are pulling in the correct imports in you tag, like Bootstrap 5 or 4 etc...

(SECOND ATTEMPT)

header {
  border-bottom: 3px solid blue;
  background-color: #eaeaea;
}

.dropdown-item {
  background-color: red!important;
}

.sidebar {
  overflow: hidden;
  background-color: #eaeaea;
  position: sticky; 
  top: 0; 
  width: 200px; 
  border-right: 2px solid blue;
}

 <head>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
 </div>
    <header >
      <div id="logo" >
        <img  src="assets/img/unknown.png">
        <a href="#" >
            <i ></i>
        </a>
    </div>
        <h1>CHƯƠNG TRÌNH REBATE</h1>
        <i ></i>
        <img  src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
        <span >TuNTC23</span>
        <hr>
    </header>

    <div  id="sidebar">
        <!--sidebar start-->
            <a href="index.html" ></a>
                <div >
                    <div >
                        <a href="#"  data-bs-toggle="dropdown"><i ></i>Admin</a>
                        <div >
                            <a href="#" >A</a>
                            <a href="#" >B</a>
                            <a href="#" >C</a>
                        </div>
                    </div>
                  <div >
                    <a href="#" ><i ></i>Cập nhật PO</a>
                    <a href="#" ><i ></i>Phân loại PO</a>
                    <a href="#" ><i ></i>Ước tính rebate</a>
                    <a href="#" ><i ></i>Cập nhật rebate</a>
                    <a href="#" ><i ></i>Báo cáo</a>
                    <a href="#" ><i ></i>Tra cứu thông tin</a>
                    <a href="#" ><i ></i>Hướng dẫn sử dụng</a>
                </div>   
      </div>
<!--sidebar end-->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

I would consider your options as there are a few ways of doing this, this way is preferred by me but not everyone.

Firstly we fixed the element so its stays where it is, next we apply top:0 to make sure the element is at the top of the page and finally passing 'width: 100%' to ensure the navigation fills the width entirely.

I can help more if this answer is not enough.

CodePudding user response：

Add this CSS code:

.sticky-top {
    top: 0;
    position: absolute; /*or fixed*/
    left: 100px; /* can be more or less depending on the logo */
}

The left can be increased or decreased depending the size of the #logo