"Stuck header obstructing the view of the content beneath

I'm encountering an issue with a fixed header on my website. The list of items below the header scrolls, but the header is covering the first item at the top of the list.

Adding "margin-top:55px;" to the container holding the list moves the list down, but then the scrollbar gets hidden behind the header which doesn't look good. Any suggestions on how to display both the header and the list without any obstructions?

Your help would be greatly appreciated.

body.campaign-body { height: 100%; overflow-y: scroll; }
.container.campaign-header { position: fixed;
z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;}
.container.scroll-campaign-list { /*margin-top: 55px;*/ }
<body class="campaign-body">
<div class="container campaign-header">
<div class="row admin-header">
<div class="header-title">
<h4 class="white-txt header-name">LISTING</h4>
</div>
</div>
</div>
<div class="container scroll-campaign-list" id="campaigns-list">
<div class="row campaigns">
<div class="twelve columns list-items">
<h5 class="white-txt campaign-name">Blah blah</h5>
<p class="campaign-question grey-txt">Blah blah</p>
</div>
</div>
<hr>
... (repeated rows)
</div>
</body>

htmlcssfixed

Answer №1

To start, we need to adjust the body margin:

body {
  margin: 0;
}

Then, we should focus on setting a padding-top (not margin-top) for the scroll-campaign-list:

.container.scroll-campaign-list {
  padding-top: 50px;
}

Answer №2

A new technique I've used in the past is adding a "blocker" element like this:

Here's the HTML code:

<div class="blocker"> </div>

And here's the corresponding CSS:

/* Adjusts to match header height */
.blocker { height: 55px; }

Basically, this just involves placing an invisible div right below the header.

Check out the demonstration on Fiddle: https://jsfiddle.net/yp2zxh9r/

Answer №3

Your code has been added to a fiddle for easier manipulation. You can view the results at the following link and let me know if it meets your expectations:

I have adjusted your header to stick to the top of the page, allowing me to apply a margin to the list.

.container.campaign-header { position: fixed;
    z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff; top:0;}
.container.scroll-campaign-list {margin-top: 75px; }

https://jsfiddle.net/m4fw7mk1

Answer №4

To prevent the scroll bar from passing through the header, you will need to create a fixed content area that manages the scrolling instead of relying on the body for scrolling functionality.

Refer to This Fiddle for the basic setup.

Ensure that your body has no margin or padding:

* {
    margin: 0;
    padding: 0;
}

Next, fix your header to the top and left:

.campaign-header {
    top: 0;
    left: 0;
}

Your campaign scroll list should be a fixed container with a height equal to 100% minus the header's height. It should be positioned below the header and allow scrolling:

.scroll-campaign-list {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    height: calc(100% - 55px);
    overflow: scroll;
}

View a demo in this fiddle containing your content.

Answer №5

It is my belief that utilizing distinct classes is more beneficial. As a result, I have removed the .container class.

 body.campaign-body {   height: 100%;  overflow-y: scroll; }
    .campaign-header { position: fixed; top: 0;
        z-index: 1000; background: #000; width: 100%; height: 55px; color:#fff;}
    .scroll-campaign-list { margin-top: 95px; }
 <body class="campaign-body">
      <div class="campaign-header">
        <div class="row admin-header">
            <div class="header-title">
                <h4 class="white-txt header-name">LISTING</h4>
            </div>
        </div>
     </div>
     <div class="scroll-campaign-list" id="campaigns-list">
        <div class="row campaigns">
            <div class="twelve columns list-items">
                <h5 class="white-txt campaign-name">Blah blah</h5>
                <p class="campaign-question grey-txt">Blah blah</p>
            </div>
        </div>
        <hr>
        <...other rows of campaigns with corresponding elements...>
     </div>
     </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

Error encountered with the @Import rule during CSS Isolation implementation

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); Attempting to use CSS i ...

cssasp.net-core-6.0

What is the best way to continuously run a re.search for new data?

I managed to extract two sets of data from an HTML table using regex expressions. Here is the extracted data: <div class = "info"> <div class="name"><td>random</td></div> <div class="hp"><td>123456</td&g ...

pythonhtmlregexhtml-parsing

Exploring the possibilities of ASP.NET paired with HTML5 web storage

I am currently working on an application and I have a feeling that utilizing html5 web storage, specifically localstorage, could greatly benefit me. However, the implementation is proving to be more challenging than anticipated. It's possible that my ...

javascripthtmllocal-storage

Tips for preserving the current DOM using Ajax, jQuery, and PhP

I made some changes to my page by adding new divs, and now I want to save all of it, replacing the old content. Example of the DOM body: <body> <div id="save_dom">Save</div> <div class="box">111</div> <div cla ...

javascriptphpjqueryhtmlajax

Having difficulty in animating the upward movement of textbox2

I've got a form that contains 2 buttons and 2 textareas. When the form loads, I want to display only section1 (button, textarea) and the section2 button. Upon clicking the section2 button, my aim is to hide the section1 textarea, reveal the section2 t ...

javascripthtmlcsscss-animations

Modifying the color of a GIF animated image using CSS

I'm currently working on an Angular application and I have a transparent GIF Loader image that I downloaded. I've been trying to figure out how to change the color of the GIF image, but so far, I've only been successful in resizing it. I sea ...

htmlcssangular

I am in search of a specialized 3D camera with a unique effect

I am seeking assistance with animating a camera to replicate or closely resemble the effect seen in this demo: Any help would be greatly appreciated. ...

javascripthtmlwebgl

Is there a way to eliminate a div and all its contents from the DOM?

As I work on my web application, I am trying to implement a system where error messages can be returned via ajax upon success or failure. The ajax script is functioning correctly in terms of returning errors or successes. However, my challenge lies in com ...

javascriptjqueryhtmlcssajax

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier ...

javascriptjqueryhtmlcss

Error: Collision detection in Three.js console output

I am attempting to create a collision detection system using Three.js (a WEBGL library). However, I keep encountering an error stating "cannot call method multiplyVector3 of undefined". Is there anyone who can help me identify what I may be doing incorrec ...

htmlwebthree.jswebgl

Is there a way to delete a wrapper (parent element) in Angular without deleting the child element as well?

The solution provided in this answer on Stack Overflow addresses jQuery and not Angular or TypeScript. My inquiry bears resemblance to this question raised on a forum, but I am specifically looking for a resolution within the context of Angular. Is there ...

htmlangulartypescriptdomdom-manipulation

Maintain the default material-ui class styles while making customizations to override others

Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class: const useStyles = makeStyles(theme => ({ tooltipPlacementTop: { margin: '4px 0' ...

cssreactjsmaterial-uioverriding

HELP! Imagemaps are being ruined by overlapping DIVs!

I encountered a minor issue. In summary, I have a container div that displays rotating images and image maps with clickable links within each image setup like a gallery with built-in navigation. Recently, I was tasked with adding simple animations to the i ...

javascriptjqueryhtml

Creating a collection of HTML elements

Is there a proper method to create an array of HTML elements? I attempted the following: array.push(<tr>); array.push(<input type="text">); array.push(/tr); I'm wondering if there is a correct way to accomplish this task. Any guidance wo ...

javascriptjqueryhtmlarrays

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

Having trouble locating the existing placeholder in my WordPress theme that I'm trying to change

I am currently using the KuteShop WordPress Woo-commerce template and I want to customize the Placeholder Text "I'm searching for..." and "All Cate." shown in the image below: Despite my efforts, I have been unable to locate where I can make these ch ...

phphtmlwordpress

Keep the element anchored to the bottom of the page as the user scrolls

Currently, I'm working on including a div at the bottom of my webpage using this code snippet: http://jsfiddle.net/gyExR/ (huge shoutout to this user) Does anyone know how I can keep this element fixed at the bottom of the page even when scrolling? ...

jquerycssposition

Positioning an image absolutely to the right of a select element with a dynamic width

I am facing a challenge with styling a dynamic width select dropdown. I am trying to add some space between this dropdown and an image positioned to the right, but CSS has not been proving effective so far. Explore my code on jsfiddle: http://jsfiddle.net ...

csscss-position

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

htmlcss

Should HTML input arrays be named as [] or [0]?

I am looking to implement multiple forms with a single submit (save) button. <?php for ($i = 0; $i < count($c); $i++): ?> <div> <input type="radio" name="gender[<?php echo $i ?>]" id="gender_<?php echo $ ...

phphtmlarrays