Move the text below the fixed header position

Question

Move the text below the fixed header position

Here is a fiddle I created to address the issue mentioned: link here

In this scenario, the header and footer are positioned absolutely with 100% width, while the middle content consists of a dashboard table. The header contains two images that when clicked, toggle the content.
When clicking on slide-toggle-1, the content of headerbottombar becomes visible.
However, the middle content is hidden and overlapped in the process.
How can we ensure that the middle content is properly displayed when clicking on slide-button-1 and slide-button-2?
Any suggestions or solutions using css, jquery, or javascript are appreciated as long as they are practical and effective.

javascript jquery html css

Answer 1

Answer №1

If you want to adjust the position of a div, consider adding a custom class with margin-top to move it down as needed. For example:

.custom{ margin-top:50px; }

Apply this class to your div with ".box" like this:

<div class="box custom">

Then simply toggle the class on two clicks using jQuery:

$( ".box" ).toggleClass( "custom" );

You can modify the styles further based on your requirements, but this gives you a basic idea.

Answer 2

If you want to adjust the position of a div, consider adding a custom class with margin-top to move it down as needed. For example:

.custom{ margin-top:50px; }

Apply this class to your div with ".box" like this:

<div class="box custom">

Then simply toggle the class on two clicks using jQuery:

$( ".box" ).toggleClass( "custom" );

You can modify the styles further based on your requirements, but this gives you a basic idea.

Answer 3

Answer №2

Update : For a sticky header with variable height that stays at the top, you may need to utilize some JavaScript to adjust the content's top margin dynamically.

var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';

Source

Old Answer :

There are various methods to achieve your desired layout. One option is to set the header position to relative (and remove line breaks between header and content). Using fixed or absolute positions could cause overlap between the header and body content, whereas setting it to relative will push the content down as the header expands.

Check out this example: https://jsfiddle.net/d0pyxdoj/3/

P.S. Remember, in your code, the Header/Footer have a fixed position, not absolute.

Answer 4

Update : For a sticky header with variable height that stays at the top, you may need to utilize some JavaScript to adjust the content's top margin dynamically.

var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';

Source

Old Answer :

There are various methods to achieve your desired layout. One option is to set the header position to relative (and remove line breaks between header and content). Using fixed or absolute positions could cause overlap between the header and body content, whereas setting it to relative will push the content down as the header expands.

Check out this example: https://jsfiddle.net/d0pyxdoj/3/

P.S. Remember, in your code, the Header/Footer have a fixed position, not absolute.

Answer 5

Answer №3

Take a look at the demonstration below for how to determine height through scripting and inject spacing accordingly.

Script Example:

function calculateHeight(){
         var topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }

Sample Demo : https://jsfiddle.net/scj4u0t5/1/

Answer 6

Take a look at the demonstration below for how to determine height through scripting and inject spacing accordingly.

Script Example:

function calculateHeight(){
         var topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }

Sample Demo : https://jsfiddle.net/scj4u0t5/1/

Move the text below the fixed header position

Answer №1

Answer №2

Answer №3

Similar questions

Loading screen featuring an outlined blueprint of design elements

Having trouble retrieving information from combineLatest in Angular?

When attempting to access an API hosted on Cloudflare from Heroku, a 403 error is returned

How can I pass a value from JavaScript back to the .blade file in Laravel using DataTables?

Navigating between pages using React and Material UI

The automated test using Cucumber, Capybara, and Selenium encountered an issue when attempting to select a hidden radio button

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

Leveraging the source of an image from asset variables

What steps can I take to prevent a JavaScript element from clearing everything when clicked?

jQuery radio button for mobile devices

A step-by-step guide to changing the color of white menu texts on a background using the multiply mix-blend

Combining Multiple Arrays into a Multidimensional Array

Prevent elements from overlapping within a flexbox container

The Bootstrap div is struggling to maintain its width on smaller screens

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Select only the immediate descendants of a div that are not images

Sending data to a JSON file with jQuery and AJAX: Step-by-step guide

How can attributes be passed to a Vue JS computed property getter and setter?

ReactStrap: If the dropdown list is too long, users may have trouble viewing the final values

What is the method for adjusting the border color of an ng-select component to red?