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.

<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

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

What happens when arithmetic operators are applied to infinity values in JavaScript?

Why do Arithmetic Operators Behave Differently with Infinity in JavaScript? console.log(1.7976931348623157E+10308 + 1.7976931348623157E+10308)//Infinity console.log(1.7976931348623157E+10308 * 1.7976931348623157E+10308)//Infinity console.log(1.797693134 ...

javascripttypescripttypesecmascript-6operators

Angular AutoComplete feature does not accurately filter the list items

I need to implement an auto-complete feature for the county field due to a large number of items in the list causing inconvenience to users who have to scroll extensively. Currently, there are two issues with the code. The first problem is that although t ...

javascriptangulartypescript

What is the reasoning behind the presence of hidden elements on the Google Search Result Page?

While using the debugging feature, I stumbled upon some hidden elements on the page. Can anyone shed some light on why these elements are present with a display attribute of none? The first one on the left is an iframe, followed by multiple text areas. ...

htmlcss

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

I have a similar code snippet: <article class="leading-0"> <h2> <a href="link">link title</a> </h2> <ul class="actions"> <li class="print-icon"> <a ...><img...>& ...

javascriptjqueryhtmlcsscss-selectors

Divide the promised variable into separate named variables

Here is a code snippet that I am working with: Promise.all( categories.map(category => Collection.find({ category })) ).then(items => { return items }) Currently, the output is an array with the same length as categories, where each element is ...

javascriptarraysnode.jsmongoosepromise

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

Stop the button from spanning the entire width of its container

Utilizing the Material UI button in my application with customizations as styled-components, I encountered an issue where setting the size="small" prop on the button caused it to only take up the width of the button text with some padding. This behavior pe ...

cssreactjsflexboxmaterial-uistyled-components

Utilizing React forwardRef with a functional component

Looking at my code, I have defined an interface as follows: export interface INTERFACE1{ name?: string; label?: string; } Additionally, there is a function component implemented like this: export function FUNCTION1({ name, label }: INTERFACE1) { ...

javascriptreactjstypescriptrefreact-forwardref

What is the method for breaking a statement within an if statement on Blogger when both the IF and ELSE conditions are met?

I'm making some adjustments to the labels on my blog to ensure that each post has at least two labels. The concept is that if a post has LABEL 1, it will load one script, otherwise it will load another. However, I've encountered a situation wher ...

javascriptxmlif-statementconditional-statementsblogger

I prefer children to have their own unique style, instead of inheriting their parent's CSS

I currently have a project structured in the following way: There is an index page with a full layout Separate PHP files that are included in the index page Bootstrap is used in the index page, however, in some of the separate PHP files I also use jqgri ...

phpjquerycsstwitter-bootstrap

Looking to transform this PHP function into a jQuery function that generates all the possible combinations of values in an array?

I stumbled upon this PHP code on a programming forum. Here's the original code snippet: function everyCombination($array) { $arrayCount = count($array); $maxCombinations = pow($arrayCount, $arrayCount); $returnArray = array(); $conve ...

javascriptphpjqueryarrays

Attempting to input data into elements that have been generated automatically

Trying to set values to elements with automatically generated id's: This code is functional: <input type="tekst" id="<?php echo $item->getId();?>"> <script> document.getElementById("<?php echo $item->getId();?>").v ...

javascriptphphtmlmysqldatabase

The console is showing the Ajax Get request being logged, but for some reason it is not displaying on the

Could someone please explain why this response isn't displaying on the page? $.ajaxPrefilter( function (options) { if (options.crossDomain && jQuery.support.cors) { var http = (window.location.protocol === 'http:' ? &apos ...

javascriptajaxget

What is the proper way to eliminate the port from a URL so that the images sourced from the XAMPP database can function correctly?

I am a beginner in Angular and I am facing an issue with Angular and XAMPP. I am attempting to load images from mySQL database where I stored their destinations. The problem is that Angular is trying to access that destination through this link: This is m ...

htmlangularxampp

How to detect a click event in any area of an Angular2

Hey there, I'm new to typescript and angular 2 and I've encountered an error in my code. Can someone lend me a hand in fixing this? import { Component, HostListener } from '@angular/core' export class TooltipComponent { public sh ...

javascriptangulartypescript

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Angular Website Component: HTML file <content-section [text]="data"></content-section> TypeScript file data = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand ...

javascriptangulartypescriptstring

When loading a page with Puppeteer using the setContent method, images may not be loaded

Currently, I am experiencing an issue with Puppeteer where it does not load resources that are specified with relative paths (such as background.png in the image src or in CSS url()). When I try to load the content of a local file using setContent(), the o ...

javascriptnode.jspuppeteerwebautomation

Check if the div has been clicked, even if its child elements have also

Is it possible to check if both a div and its child are clicked using jQuery? $('div').click(function(e){ if(e.target.id == 'test') alert(e.target.id); }); I have a specific div with an id of #test in my HTML code, and wh ...

javascriptjquery

What is the process for identifying children records of a parent (Adonis Lucid Many-to-Many) that match a specific criteria?

I am currently searching for the presence of specific Permissions within a single parent Role in a many-to-many relationship. const roles = await Role .query() .preload('permissions') this.role = roles.find(role => role.id === someid) co ...

javascriptnode.jsactiverecordadonis.jslucid