The top of the page does not contain the header

I am attempting to recreate a website's front end in order to enhance my skills. One issue I am facing is that the Header is not positioned at the top of this site. Although I am new to bootstrap, I am determined to figure it out. I have already reset the CSS settings. This is my first time working on this, so I truly appreciate any assistance.

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

.img {
   width: 221px;
   height: 56px;
}
 <div id="logo" class="pb-2">
   <img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
   <a href="#" class="sidebar-toggler flex-shrink-0">
       <i class="fa-solid fa-angle-left py-4 pe-2"></i>
   </a>
</div>
<div class="sidebar pe-4 pb-3" id="sidebar">
    <!--sidebar start-->
        <a href="index.html" class="navbar-brand mx-4 mb-3"></a>
            <div class="navbar-nav w-100">
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
                    <div class="dropdown-menu bg-transparent border-0">
                        <a href="#" class="dropdown-item">A</a>
                        <a href="#" class="dropdown-item">B</a>
                        <a href="#" class="dropdown-item">C</a>
                    </div>
                </div>
                <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Update PO</a>
                <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Classify PO</a>
                <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Estimate rebate</a>
                <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Update rebate</a>
                <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Reports</a>
                <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Information lookup</a>
                <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>User guide</a>
            </div>        
<!--sidebar end-->
</div>
<header class="sticky-top">
    <h1>REBATE PROGRAM</h1>
    <i class="fa fa-bell me-lg-2"></i>
    <img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
    <span class="d-none d-lg-inline-flex">TuNTC23</span>
    <hr>
</header>

htmlcssbootstrap-5

Answer №1

After rearranging some code, I've managed to get it looking close to what we want. Just make sure you're importing the correct libraries in your <head> tag, such as Bootstrap 5 or 4.

(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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3eff3ed">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
 </div>
    <header class="flex flex-col sticky-top">
      <div id="logo" class="pb-2">
        <img class="float-start py-2 ps-1 pe-2" src="assets/img/unknown.png">
        <a href="#" class="sidebar-toggler flex-shrink-0">
            <i class="fa-solid fa-angle-left py-4 pe-2"></i>
        </a>
    </div>
        <h1>CHƯƠNG TRÌNH REBATE</h1>
        <i class="fa fa-bell me-lg-2"></i>
        <img class="rounded-circle" src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
        <span class="d-none d-lg-inline-flex">TuNTC23</span>
        <hr>
    </header>

    <div class="sidebar pe-4 pb-3" id="sidebar">
        <!--sidebar start-->
            <a href="index.html" class="navbar-brand mx-4 mb-3"></a>
                <div class="navbar-nav w-100">
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle"><i class="fa fa-laptop me-2"></i>Admin</a>
                        <div class="dropdown-menu bg-transparent border-0">
                            <a href="#" class="dropdown-item">A</a>
                            <a href="#" class="dropdown-item">B</a>
                            <a href="#" class="dropdown-item">C</a>
                        </div>
                    </div>
                  <div class="sidebar">
                    <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
                    <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
                    <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
                    <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
                    <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
                    <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
                    <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
                </div>   
      </div>
<!--sidebar end-->
   <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa6baa4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

There are various methods to achieve this, and this is my preferred way, but not necessarily everyone's preference.

We first fixed the element in place, then set top: 0 to ensure it stays at the top of the page, and finally applied 'width: 100%' to make sure the navigation occupies the full width.

If you need more assistance, feel free to ask.

Answer №2

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Express is causing an issue with the AngularJS loading process

When I view the index.html file in a browser, everything works fine. However, when I try to run it on a local server using Express, it doesn't work as expected. Server.js const express = require('express'); const app = express(); app.get ...

htmlangularjsnode.jsexpress

Is it one form but with two buttons?

How can I identify which button was clicked in a form without using a hidden input field and JavaScript to set different values for each button? You can check out an example demonstrating this technique here: Is there a more straightforward way to achiev ...

htmlformsjsp

What is the method to display the width of a drop-down menu when using overflow:hidden?

Are there any solutions available for displaying a dropdown menu while using overflow in bxslider? The div currently has overflow:hidden to properly display the carousel. Any ideas on how to resolve this issue with z? .member{ position: absolute; ...

htmlcssoverflowz-indexbxslider

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

javascriptphphtml

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts

Is it possible for me to determine the quantity of lines present in the text without any

I have a user-input field where individuals can enter information. The input can range from no information at all to as little as a single word or unlimited characters. However, my focus is on handling cases where the text exceeds three lines. To address ...

javascriptcssvuejs3

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

csshtml

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

It's strange because my style.css file in the public folder works on one page but gives me an error on another. I'm not sure why it would work on one page and not on the other. The CSS is imported in index.html so it should work on all pages of t ...

javascriptcssreactjsnode.jsreact-router

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...

css

Equal dimensions for all cards in the TailwindCSS gallery display

I am currently working on an image gallery in React with Tailwind CSS. Here's a glimpse of how it looks: https://i.stack.imgur.com/ABdFo.png Each image component is structured like this: <div className="flex items-center"> < ...

htmlcssreactjstailwind-cssimage-gallery

Blending HTML elements with ASP.NET code

Trying to concatenate two strings separated by a line break. This snippet shows what I am attempting: <td>@(string.Join("<br /> ", report.TimeReportProjects.Select(x => x.Project.ProjectName)))</td> <td>@(string.Join("<br /& ...

htmlasp.net

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Why is float left not working as expected in CSS and Bootstrap 4?

I need to arrange 9 cards in a grid format of 3 by 3, but when viewed on a smaller device, it should adjust to display as a simple list of 9 cards. CSS: .cardContainer{ width: calc(54rem + 60px); margin: auto; } .card{ width: 18rem; marg ...

htmlcsstwitter-bootstrapbootstrap-4

An easy way to attach a Contextmenu to a specific element

I have implemented a scrolling feature for one of the div elements in my Application. Inside this div, there is a templated table with over 100 rows. Users are able to add or delete rows using a contextMenu. The contextMenu offers 4 options - AddTop, AddB ...

javascripthtmlcss

How can I locate specific images within a CSS sprite?

Are you searching for the correct process to pinpoint specific image locations within an image sprite? If, for example, you aim to create 10 div images in your header using the image provided below, how can you determine the exact location of each one? Is ...

css

When data is submitted through the POST method, it mysteriously disappears

When I send the "user" variable to another page called Survey.php, here's how it looks: In the index.html file: <form action="Survey.php" method="post" name="frm"> <div><input type="text" name= ...

javascriptphphtmlformspost

Implementing a dual hover effect on a Div element

I am working with HTML code that includes an image and text <div class="subcontainer1"> <img src="a.png" alt="" class="imgcolumn"> <h3 class="header3">Hello</h3> </div> This setup places the content above the image. ...

javascriptjqueryhtmlcss

What is the process for altering the active color of a materialize icon?

Currently working on a web application for my school project and incorporating the Materialize framework. However, I'm having trouble modifying the default teal color of the active icon. https://i.sstatic.net/9eEfM.jpg ...

htmlcssmaterialize

Utilizing ID's within a jade template embedded within a P HTML element

Using the jade template, I successfully formed this paragraph. My next step is to add an ID or a class around the word stackoverflow. How can I achieve this in jade? I am aware that in regular HTML we would use something like <div class="className"> ...

javascripthtmlnode.jspug