Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Hi, I'm having an issue with creating a fixed header using HTML and CSS. When I set my header to be in a fixed position, it covers up the content below it. I want the content to be positioned under the header when the page is loaded. Additionally, I've set the header width to 100%, but for some reason, it shifts to the right and doesn't cover the entire width of the screen.

https://i.sstatic.net/B70Ms.png

<style>
@media(min-width: 468px) {
    body{
        background-color: aqua;
    }
    .container-1{
           display: flex; 
           
        }
        .container-2{
            display: flex;

            justify-content: space-between; 
        }
}
       .container-3{
           display: flex;
           flex-wrap: wrap;
       }
        
        .container-1 div, .container-2 div, .container-3 div{
            border:1px #000000 solid;
            padding:10px;
        }
        
        .box-1{
        flex:2;
        order:2;
        
        }
        .box-2{
            flex:1;
            order:1;
        }
        .box-3{
            flex: 1;
            order:3;
        }

        .container-2-box{
            flex-basis:20%;
        }

        .container-3-box{
            flex-basis: 10%;
            
        }
        header{
            padding: 0.5rem;
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: beige;
            position: fixed;
            width: 100%;
            margin:0;

        }
        .whole-container{
            margin-top:2.0rem;
            
        }
        </style>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Flexbox</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
</head>

<body>
    <header>
        <h1> Flexbox</h1>
    </header>
    <div class="whole-container">
    <div class="container-1"> 
        <div class="box-1">
            <h3>Box 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="box-2">
            <h3>Box 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="box-3">
            <h3>Box 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

    <div class="container-2"> 
        <div class="container-2-box">
            <h3>Box 4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-2-box">
            <h3>Box 5</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-2-box">
            <h3>Box 6</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="container-3"> 
        <div class="container-3-box">
            <h3>Box 7</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 8</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">

            <h3>Box 9</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 10</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 11</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 12</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
</body>
</html>

javascripthtmlcss

Answer №1

It's always a bit tricky to troubleshoot without actually seeing the HTML code, but I'll do my best to help.

When you apply position: fixed to an element, it will naturally overlap with other content as it is taken out of the document flow. To prevent any overlapping or hidden content, try adding padding to the parent container of the elements. You can try adding the following code to see if it resolves the issue:

body {
   padding-top: 3rem; /* Make sure it is at least the height of the header */
}

If the issue also involves the position of the header, you can fix it by using either of the following approaches:

/* Option 1 - Set a left position */
header {
   ... 
   left: 0;
}

/* Option 2 - Remove width and use left and right positions instead */
header {
   ... 
   /* width: 100%; Remove this line */
   left: 0;
   right: 0;
}

Answer №2

body { margin: 0; }

body {
  margin: 0;
}

header {
  padding: 0.5rem;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: beige;
  position: fixed;
  width: 100%;
  /*not cover whole width*/
  margin: 0;
}

.whole-container {
  margin-top: 2.0rem;
}
<body>
  <header>
    0000
  </header>

</body>

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

Perform a jQuery AJAX GET request while passing the current session information

Is it possible to retrieve the HTML content of another webpage using jQuery, particularly when that page is already signed in? In simpler terms, can we use $.get() to fetch a different page on the same website and transfer the PHP/Javascript cookies with ...

phpjavascriptjqueryget

Unexpected interactions between Socket.io and React using hooks

Currently, I am delving into the world of Socket.io with React utilizing Hooks. My goal is to create a timer that starts upon pressing the start button, and then every second, send the current time in the state to the server using socket.io. The server co ...

javascriptnode.jsreactjssocket.ioreact-hooks

Words are cut off in a random manner on the entry content list for phone users

I struggle with CSS and have a basic understanding to make adjustments to my website. The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut ...

css

Adding a CSS style to specific sections of a string that is quoted in a Razor ASP.NET file

Is it possible to format a specific part of a string? I'm trying to only stylize the word within quotation marks. This is my cshtml code: { <div class="h-44 overflow-auto text-left mx-4 mb-4"> <p ...

c#cssasp.netasp.net-corerazor

The Angular directive was unable to reach the controller located higher up in the DOM hierarchy

template <section id="content" ng-controller="ReservationController as resvnCtrl" > <form role="form" name="resvnCtrl.form"> <div data-date-picker> </div> ...

javascriptangularjs

Concealing the footer on a webpage embedded within an iframe

<script> $(document).ready(function(){ $('.mydivclass').hide(); }); </script> Looking to embed Microsoft Forms in my HTML using an iframe. Can the footer of the Microsoft Forms be removed? ...

jqueryhtmliframecross-domain

Developing an Angular filter using pipes and mapping techniques

I am relatively new to working with Angular and I have encountered a challenge in creating a filter for a specific value. Within my component, I have the following: myData$: Observable<MyInterface> The interface structure is outlined below: export ...

javascriptangulartypescriptrxjs

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...

csssafari

Data retrieval seems to be encountering issues in Firefox and IE9, whereas Chrome and Safari are functioning without any problems

I am using the following method function callCommentservice() { try { // Comment Service Url var getCommentServiceUrl = self.commentsServiceUrl + self.getRating + "tenantId=" + self.tenantId + "&ratedObjectTypeId=" + sel ...

javascriptajaxjsonjquery

Use React to increment a variable by a random value until it reaches a specific threshold

I am currently working on creating a simulated loading bar, similar to the one seen on YouTube videos. My goal is for it to last 1.5 seconds, which is the average time it takes for my page to load. However, I have encountered an issue with the following co ...

javascriptreactjs

Establishing headings and frames for a collection of Essays

I have integrated a RSS Feed into my Vue.js application to display a series of articles. I want to organize these articles in a container similar to tweets on the left, with a heading labeled Latest Articles. However, when I use a tag in the template sect ...

htmlcssnode.jsvue.js

An issue of an infinite loop arises when utilizing the updated() lifecycle hook in VueJS

I am working on a VueJS application where I need to fetch a list of articles in one of my components. The logic is such that if the user is logged in, a specific request is made, and if not, another request is executed. Below is the snippet of code: <s ...

javascriptvue.jshook

Implementing Scroll-Activated Class with Vanilla JavaScript

I'm currently developing a Vue.js project and I want to implement a feature where a "back to top" button appears when the user scrolls beyond a certain point. However, I'm encountering an issue without using JQuery. Can you help me troubleshoot t ...

javascriptvue.js

Utilize the string module from a JavaScript file in your React or Next.js project

Within my project structure, I have a file named "test.js" located in the "/constants" directory. The content of this file is as follows: const test = "test!" export default test In another part of my project, specifically within the "/pages" folder, I w ...

javascriptreactjsimportnext.js

How can I showcase a Google donut chart using an array of data in a React application?

I have created a doughnut chart that is supposed to take an array as data. However, when I input the array, nothing shows up on the chart. How can I create a chart with array data? sum.js ... const arr = []; arr.push({ key: capitalizeEachFirst ...

javascriptreactjs

The Javascript slider fails to function properly when utilizing AJAX to load the page

I have encountered an issue while trying to open an HTML page using ajax when a button is clicked. The HTML page that I am opening contains a JavaScript slider that functions properly when opened individually, but stops working if opened through my index. ...

javascriptajaxmootoolsslider

How to display and download a PDF file on a JSP web page

Can anyone help me with a simple trick to solve this question I have? In my project folder, I have 5 PDF files named file1.pdf, file2.pdf, file3.pdf, file4.pdf, and file5.pdf. I want to display these files in 5 rows on my webpage, each row containing VIEW ...

javascripthtmljspprinting

Embedding PHP script within HTML code can enhance website functionality and

I am completely new to PHP and have never worked with it before. I'm interested in running a PHP script from within an HTML file on a Linux system. Can anyone guide me through the process? Below is the code from my HTML file: <!DOCTYPE HTML PUBLI ...

phphtmllinux

CSS Grid generates a unique container for every HTML element

My website's CSS code includes the following: *{ height: 100%; width: 100%; margin: 0; } .grid{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .grid div:nth-child(odd){ border: black 2px so ...

htmlcssvue.jscss-grid

Webpack is throwing an error stating that it cannot find a module with the relative path specified

Here is the structure of my app (excluding the node_modules directory): ├── actions.js ├── bundle.js ├── components │   ├── App.js │   ├── Footer.js │   ├── Link.js │   ├── Todo.js │   └─ ...

javascriptnpmwebpackrelative-path