Page header overlaps quiz

  • Resolved Patrick

    (@pglad)


    3 years, 5 months ago

    Hello, I have seen that there is a previous (closed) thread which covers this problem. I tried the steps in there which said to alter the following line:

    {
    scrollTop: jQuery(“.hdq_results_wrapper”).offset().top – 100,
    },

    I tried this but it didn’t appear to have the desired affect even after clearing the browser cache.

    I’m using the ‘Vantage’ theme.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Patrick

    (@pglad)

    I have tried a different theme and it works fine with the new one. Please disregard my question!

    Plugin Author Harmonic Design

    (@harmonic_design)

    haha, well let me know if you need help with anything else ??

    Thread Starter Patrick

    (@pglad)

    Hello, I’m back again with this same question I’m afraid. I’m testing a new theme and as mentioned above, when clicking in the ‘next’ button the new question scrolls up and partly disappears. Any idea how I can stop this please?

    The new site is a staging site, you may get a security warning if you visit.

    This is the page with the problem

    Plugin Author Harmonic Design

    (@harmonic_design)

    Under HD Quiz -> About / Options, enable the “enable Legacy Scroll” setting and see if that fixes it for you. This setting has the offset that you mentioned in your earlier post ??

    Thread Starter Patrick

    (@pglad)

    Perfect, thanks again!

    Thread Starter Patrick

    (@pglad)

    Sorry to be a pain, I thought turning on Legacy Scroll had done the trick. It works fine for text only questions but parts of images are still overlapped by the header. Is there an easy way to increase the margin / padding at the top?

    I also have a problem when using 4 images as question options. Instead of appearing as a square block they’re staggered – https://www.staging6.ukdrivingskills.co.uk/theory-test-practise/free-lgv-theory-test (this is a test staging page, you may get a security warning).

    Plugin Author Harmonic Design

    (@harmonic_design)

    Your theme is adding a pseudo-class to all elements on your page to make them position as a table. This is just… super weird and I have no idea why the theme developers thought this was a good idea :S

    Add the following CSS to your site to force HD Quiz to use native and default positions.

    .hdq_quiz_wrapper div:before{
    content: initial;
    display: initial
}

    On most themes, you can add that code by going to Appearance -> Customize -> additional CSS.

    The best way to increase the scroll offset is to do what you originally did and edit the JS script file to change the offset().top values to something larger. Now that you are using the legacy scroll, the offset should take effect. Let me know if you need more help with this!

    Thread Starter Patrick

    (@pglad)

    The CSS did the trick for sorting the multiple image options, thanks very much!

    Still can’t fix the overlap problem though. No matter what value I give for .offset().top this is ignored. There are 4 instances of .offset().top in the js file… I’ve tried changing all 4 to a higher value – is that correct?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Page header overlaps quiz’ is closed to new replies.