Sitcky Header Gap

  • Hello everyone! Much love to the Press Customizr crew.

    I have been trying to figure out how to eliminate the large gap the sticky-header leaves on my pages when I scroll down. I use a larger-than-average logo image, and when the header readjusts, the page beneath it does not. Is there anyway to have the page slide up flush beneath the sticky-header? Rdell (<3) said it may be possible with JavaScript, but there has yet to be an update on the matter.

    Example and shameless plug: https://theworstteamever.com (Barely NSFW) Gaming community my friends and I have been working. Please feel free to sign up. We play Rust, Eve, Warhammer, as well many, many others.

    Original Topic: https://www.ads-software.com/support/topic/sticky-header-and-body-adjust-with-large-logo

Viewing 9 replies - 1 through 9 (of 9 total)

  • I’ve tried with CSS but it won’t work!

    .sticky-enabled #tc-reset-margin-top {margin-top: 75px !important;}

    Needs some Javascript wizardry (I’ll see if @d4z can take a look)

    rdell, I think that your solution is the cheapest and it’s reasonable.
    Maybe just setting the margin-top to 150px !important and if needed tweaking it for small viewports..
    Why do you say it won’t work? what’s the issue?

    I injected that into Inspector/FF and the page went wild alternating between sticky/non-sticky.

    Maybe in the Child Theme style.css it will be OK?

    Mmm well most likely it’s because of the sticky-footer which depends on the page height, and changing that div margin-top impacts on the page height. probably the better thing will be change the sticky-header trigger height.
    Will see if it’s easily achievable without changing the core js.

    Thread Starter Devin J Dawson

    (@devinjdawson)

    I tried what @rdellconsulting suggested and I had a similar result. @d4z_c0nf, thanks for joining in here. This issue has been troubling me for a while.

    I started fiddling with:

    <div id="tc-reset-margin-top" class="container-fluid" style="margin-top: 437px;"></div>

    However, the style="margin-top: 437px; seems to change depending on display size, the variable being generated by some JavaScript and not CSS.

    That bit seems to be linked to <div id="main-wrapper" class="container">, which should wrap underneath the tc-reset-margin-top.

    In any case, thanks for the help so far. I’ll be looking forward to any updates.

    Thread Starter Devin J Dawson

    (@devinjdawson)

    any update on this?

    Thread Starter Devin J Dawson

    (@devinjdawson)

    double bubble bumpsauce

    Thread Starter Devin J Dawson

    (@devinjdawson)

    anything?

    Thread Starter Devin J Dawson

    (@devinjdawson)

    i’m so ronery

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sitcky Header Gap’ is closed to new replies.