• Resolved dccharron

    (@dccharron)


    Still my favourite theme…thank you for all the work.

    Using Sticky Header with pages that have internal page links (href starts with #). When clicking on the link, the page repositions correctly but the sticky header overlays the first 80-100 pixels. I tried using the workaround provided by your team at
    https://presscustomizr.com/snippet/make-header-sticky/
    but was unable to adjust the CSS elements to make it work.

    I can see that the jquery + functions.php + CSS are all working. I tried adjusting the 3 CSS classes commented as requiring adjustment but nothing seems to work. Either I get a big blank gap at the top of the page or not. Regardless of that, the internal link positions the top of the page under the semi-transparent sticky header.

    Any suggestions?

    Page in question is: https://purelandcentre.org/what-will-happen-to-me-after-i-die/#Part1

Viewing 6 replies - 1 through 6 (of 6 total)
  • @dccharron

    This is what you want. Check the last section labeled “Fancier (Clean HTML) Method”. Had the same problem and worked fine for me.

    Details:

    HTML (instead of <h2>-tag or additionally you also can assign a css-class)

    <a href="#goto">Jump</a>
    
    <!-- yadda yadda yadda -->
    
    <h2 id="goto">Header</h2>

    CSS (adjust your css-class and pixel values accordingly)

    h2:before { 
      display: block; 
      content: " "; 
      margin-top: -285px; 
      height: 285px; 
      visibility: hidden; 
    }

    Good luck!

    • This reply was modified 7 years, 8 months ago by stucyber. Reason: added details for archival reasons
    Thread Starter dccharron

    (@dccharron)

    Woo hoo! Well done! Many thanks. First time I use a pseudo.

    Variation: I used a new “class” (called it “below-header”). Provides me with better control as in:

    .below-header:before { 
      display: block; 
      content: " "; 
      margin-top: -100px; 
      height: 100px; 
      visibility: hidden; 
    }

    then

    <h4 id="Part1" class="below-header">Introduction</h4>
    .
    .
    .
    <a href="#Part1">Back to Introduction</a>

    Works like a charm. Thanks again.

    • This reply was modified 7 years, 8 months ago by dccharron.

    Glad to help. Maybe mark this as solved?

    Thread Starter dccharron

    (@dccharron)

    I spoke too soon. It doesn’t work if I use it like this:

    Part 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit dolor sed erat maximus, id dictum odio ullamcorper. Pellentesque vel velit ullamcorper, egestas sapien in, sagittis libero. Aenean dapibus sapien vitae nisi efficitur lobortis.

    Link back to start of Part 1

    Part 2
    Donec condimentum est varius, mattis ipsum vel, ullamcorper nisi. Etiam vitae faucibus eros, ut vehicula mauris. Praesent cursus nunc nec velit maximus, vel rhoncus nibh vestibulum.

    Link back to start of Part 2

    Part 3
    Mauris placerat consectetur faucibus. Nulla augue mi, luctus vitae felis efficitur, ultrices dapibus ligula. Fusce nulla nisl, vehicula non tellus a, tristique convallis libero. Aliquam fermentum finibus tortor vitae pulvinar. Nullam placerat neque justo, sit amet iaculis velit rutrum id.

    Link back to start of Part 3

    When I apply the solution to this scenario, only the last link works (Link back to start of Part 3). The other two links appear on the page but when I hover my mouse over them, nothing happens (pointer doesn’t change and I can’t click on them). I can see what’s happening is that the negative margin and compensating height cause the heading element to take up physical position ON TOP of the href. When that happens, the href doesn’t work. On the very last link (back to Part 3), because there is no big invisible overlay, the href is visible and works.

    I’ve experimented with various things but nothing seems to solve the problem.

    I had a look at your source code. You write you’re using
    <h4 id="Part1" class="below-header">Introduction</h4>,
    but actually your html still uses the deprecated

    <a name="Part1"></a>
    <h4 style="margin-top: 0px; line-height: inherit; font-style: italic;">1 Introduction</h4>

    .
    Did you update your code? Are we still seeing a cached version, that means do you use a cache plugin or a minifier and did not empty the cache?

    Compare your code to my html at https://www.s-c-b.org/contact/privacy-policy/ and css below:

    h2.pp-anchor:before,
    p.pp-anchor:before {
        display: block;
        content: " ";
        margin-top: -120px;
        height: 120px;
        visibility: hidden;
    }
    
    • This reply was modified 7 years, 8 months ago by stucyber. Reason: link and css added
    Thread Starter dccharron

    (@dccharron)

    Sorry. I ran out of time to get this working. The simple solution was to turn off the sticky header on the theme. It’s not my favourite solution but at least I know it is working. I have a meeting with the client tomorrow morning.

    I appreciate your second look at my problem. At the moment I’m not able to set up a separate test case since it would have to be done on a separate website (where I can turn on the sticky header).

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Internal Page Links and Sticky Header’ is closed to new replies.