Clear fixed header with javascript

Question

I have a site here: http://staging.seedcreativeacademy.co.uk/blog/ where I have fixed the header.

At the moment, on other pages I have added a top margin in manually to clear the fixed header (so the content doesnt fall behind the header).

However this is getting a little complex so I'm looking for a site wide fix. I came across a way of doing out in JQuery, like so:

jQuery(document).ready(function() {
    header_height = $(".site-header").height();
    $(".site-inner").css("margin-top", header_height);
});

However, this isn't working. I think it's not working because the fixed .site-header doesn't actually have an assigned height. I think the height is based on the contents and the padding / margin of the contents.

So, is there anyway around this? the header is fixed on ever page so I'm trying to figure out a site wide solution...

Also, the amount of margin needed changes as the pages shrinks for different devices, currently fixed with media queries.

So I guess I need something that can constantly measure the .site-header and apply that number of margin to the .site-inner...

I'm open to any other ideas if this isn't the correct way to approach this.

Shital Marakana · Answer 1 · 2017-11-06T12:33:24.210

1

use below function for get client height or off set Height of header part

jQuery(document).ready(function() {
   // headerHeight = $('.site-inner').height();
    var clientheaderHeight = document.getElementsByClassName('site-inner').clientHeight; //includes padding.
    //Or
    //var offsetHeight = document.getElementsByClassName('site-inner').offsetHeight; // includes padding, scrollBar and borders.

   jQuery('.site-inner').css('margin-top', clientheaderHeight);
});

more info here : Get div height with plain JavaScript

edited Nov 06 '17 at 12:33

answered Nov 06 '17 at 12:11

Shital Marakana

2,817
1
9
12

Thanks @Shital - However this is not working and I'm getting the following error in console: TypeError: null is not an object (evaluating 'document.getElementById('.site-inner').clientHeight') – Shaun Taylor Nov 06 '17 at 12:16
please check now – Shital Marakana Nov 06 '17 at 12:19
Different erros in the console: TypeError: $ is not a function. (In '$(window)', '$' is undefined) - Sorry I dont know enough javascript to troubleshoot errors!! :) – Shaun Taylor Nov 06 '17 at 12:22
use jQuery instead of $ – Shital Marakana Nov 06 '17 at 12:23

score 1 · Answer 2 · answered Nov 06 '17 at 12:21

1

Can you not just apply the height of your header as a top margin to your .site-inner class? This would fix all pages on your site.

.site-inner {
    margin-top: 149px;
}

and for mobile screen size header:

@media (max-width: 859px) {
    margin-top: 93px;
}

answered Nov 06 '17 at 12:21

Coffee bean

1,474
15
27

I think I can, however, as it changes on lots and lots of different screen sizes I was hoping for a more dynamic solution, hence trying JS... – Shaun Taylor Nov 06 '17 at 12:26
It appears to only be 1 of the 2 sizes as above – Coffee bean Nov 06 '17 at 12:26

score 1 · Accepted Answer · answered Nov 06 '17 at 12:22

1

you need to take outerHeight() instead of height().

Here is your updated code which you need to apply:

 jQuery(document).ready(function(){
    header_height = jQuery(".site-header").outerHeight();
    jQuery(".site-inner").css("margin-top", header_height);
 });

I have checked by executing above code from console in your site and its working fine.

Let me know if you need more help.

Thanks!

answered Nov 06 '17 at 12:22

AddWeb Solution Pvt Ltd

21,025
5
26
57

Sorry to ask again @Addweb, but is there anything I can add to that to exclude a certain page? My contact page: http://staging.seedcreativeacademy.co.uk/contact/ I would like it not to effect that as the first thing here is not the site-inner but the map... – Shaun Taylor Nov 06 '17 at 12:34
fixed the other issue with: .page-id-102 .site-inner { margin-top: 0 !important; } :) – Shaun Taylor Nov 06 '17 at 12:40

Clear fixed header with javascript

3 Answers3