Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 16, 2019 at 2:10 pm #1067701
    rehbiskup

    Hi,

    I have two 100% color sections on top of each other. The header is set to transparent. Then appearing after scrolling down. The jumping scroll-down arrow at the bottom is set on the correct position for the first color section. However, if I click it, the site scrolls down to the second 100% color section and the header appear. Now the 100% color section has “too much height”. That is 100% of the browser windows height plus the newly appeared menu. As a consequence, the second scroll-down arrow is not visible, as it appears too low and one can only see it after scrolling down a little. That’s not really user-friendly.

    Searching the forum, I found several posts with similar problems and different solutions (fix the position of the arrow via CSS, fix the height of the color section via function.php). Many of them are however a couple of years old.

    What would be most advisable to fix the problem on Enfold 4.5.4

    Thanks a lot in advance!
    Link to my website is in the private content section.

    February 17, 2019 at 9:29 pm #1068025
    Victoria

    Hey rehbiskup,

    Could you please attach some screenshots of the issue on your end?

    Best regards,
    Victoria

    February 18, 2019 at 10:09 pm #1068611
    rehbiskup

    Hi Victoria,

    thanks for the quick reply. Yes, as desribed, the first arrow is on the correct spot. It’s about the second arrow (once you click the first one). Please see the attached screenshot for clarification.

    Thanks!

    February 23, 2019 at 11:46 pm #1070815
    Mike

    Hi,
    Sorry for the late reply, have taken a look at your site and I believe that you have pointed to the problem, the second section is given it’s height on the page load when there is no header, but once you go to the section you will also have the height of the header. The sections do not readjust on scroll. Please try changing the height of the second section to 90% +/- to see if this helps.
    This would be a better solution than trying to adjust the height with css for each screen size.

    Best regards,
    Mike

    February 25, 2019 at 11:37 am #1071240
    rehbiskup

    Hi Mike,

    thanks for your reply. That could be a solution for me. Is there a custom CSS code to achieve the mentioned 90% height since I can only select 75% or 100% per default?

    Selection

    Thanks!

    Best,
    Helena

    February 25, 2019 at 2:14 pm #1071286
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

     #top.home #av_section_2.av-minimum-height-100 .container {
height: 90vh !important; 
}

    This is working on my screen, but feel free to try other numbers than 90vh.
    Please clear your browser cache and check.

    Best regards,
    Mike

    February 25, 2019 at 6:10 pm #1071387
    rehbiskup

    Solved – thanks

    February 26, 2019 at 7:00 am #1071646
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Misplaced scroll-down arrow on 100% color section’ is closed to new replies.