Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
  • #427471

    If you make a page with Header visibility set to ‘Header is invisible and appears’.
    And then make this page contain a series of color sections, where all the color sections have height set to ‘100% of Browser Window height’, and all sections also have ‘Display a scroll down arrow’ checked.

    The scroll to next section anchor link is smart enough to scroll the content the bottom of the appearing header and not the top of browser. But because the browser window height is calculated before the Header appears, it ends up placing a bit of the color section below the bottom browser widow. Critically this is the section that would contain the ‘scroll down arrow’. So it ends up being not visible.

    The solution would be to calculate the height of the browser as 100% height for the first section, but 100% minus height of header for subsequent sections.



    Hi The_Rhyme_Animal!

    I think the easiest way around this would be to just move the arrow up a bit with CSS. Try adding this to Quick CSS under Enfold–>General Styling:

    #top .scroll-down-link{
    bottom:40px !important;


    This reply has been marked as private.


    I checked your link but the arrow and scrolling appear to be working fine. Is there a certain page it’s having trouble on?

    I did notice the icons were having trouble loading. Try this out to fix it,



    Interesting! My icons seem to be showing correctly on my end – Safari, Chrome & Firefox. The scrolling arrow work great! The only problem is, they are offset the height of the header. The 100% of browser option is not taking into account the height of the header. See these pictures:

    How EVERY section looks:
    Image and video hosting by TinyPic

    Image and video hosting by TinyPic

    How it should look:
    Image and video hosting by TinyPic

    As you can see, the arrow is not within the browser sight unless I scroll down.


    You are exactly correct when you say:

    The scrolling arrow work great! The only problem is, they are offset the height of the header. The 100% of browser option is not taking into account the height of the header.

    As a temporary solution we employed the CSS fix suggested by Rikard. But it not an ideal solution.
    If we can get that browse height calculation right that should take care of it. I spent a few hours on it already but made little progress.




    @R: I think there’s nothing wrong with color section height. Imagine that header is invisible then place the color section at the very centre of the browser screen. You’ll see that the color section height is the same as the browser height. The problem is the next arrow scroll target. Maybe, this will help:

    @Tyler: The fix might not work on your end because you’re not using a transparent header.

    Note that the fix is temporary and is unique in order to provide a possible solution for this specific case.



    The issue ‘unclemurray’ is describing in post #439171 and the original post in this thread are describing the exact same thing.
    Unclemurray wants to see the whole section because he does not want the bottom of his video being cut off. I want to see the whole section so the bottom of the navigation arrows are not cut off. But essentially its the same issue.

    The first section is always rendered correctly, regardless of whether there is a transparent header, a non-trasnparent header, or an invisible header. The theme is smart enough to dynamically assign the height correctly, even if this means subtracting the height of the header from 100% when necessary.

    This same logic could be applied to subsequent sections of the page.
    I tried the fix at post #440743 but it only moves the anchor target, not the real issue.


    This reply has been marked as private.

    I just used the CSS mentioned above (Though some content is still cutoff). Hopefully there will be a fix soon!




    @Rhyme: I would like to argue that the scroll target, not the section height, is the issue but it will get us nowhere so if you can give us any pointers regarding the script changes, that would be great. If you like to modify the section height script, you can find it on js > shortcodes.js, look for the Section Height Helper:

    This is the line of code responsible for the section height:

    css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container{height:"+wh100+"px;}\n";
    			css += ".av-minimum-height-75 .container	{height:"+wh75+"px;}\n";
    			css += ".av-minimum-height-50 .container {height:"+wh50+"px;}\n";
    			css += ".av-minimum-height-25 .container {height:"+wh25+"px;}\n";
    			css += ".avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow{height:"+wh100_mod+"px;}\n";

    Best regards,


    @Ismael I know the above comment was directed to the other poster, but I’m having such a hard time with this. The color section extends past the page; it’s not the scroll target. I use Enfold on many sites, and using the same files, I am ONLY having this issue on one install – it’s bizarre.

    Any updates?

    have you found a solution?




    I think this thread is for a another issue, which needs a different solution. Would be better for us to open a separate ticket I think.
    Please try to delete all theme files and get a fresh copy from your themeforest account. This should fix the issue with your arrow (as you other installations are just working fine).



    Hi All,

    I seem to be having this problem also. I have a few color sections with 100% browser height setting. The first Scroll arrow is on screen but the rest are not – you have to scroll down to see the arrow, which defeats the object of this feature.

    What is the fix? Was another topic started about this?

    I tried the CSS suggested by Rikard but it doesn’t work.



    Hi @Heathcliffe,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,


    Hi @Rikard,
    Thanks for the quick response. I shall include the details below in the private section as the site is not live yet. Please can you use these also for looking at issue ?

    Many thanks,



    If you want the preceding color section to have the same height as the first color section, please follow the solution provided here:



    @Ismael, thanks for the reply. I can accept it is not a bug because @Kriesi wrote the code like that. But I think if you looked at every other theme that offers a down arrow at the bottom of a section, people would not have to be altering code because the code author decided not to make the following sections 100%. I really don’t understand the argument. When is a bug not a bug? Surely it is a design defect then?

    I’m disappointed to see quite a few people bring this up and for you not to treat it as a bug. Can this be “fixed” in the next release?

    Many thanks for your continued, quick replies.




    Thank you for the update. There are 60,000+ Enfold users and there are less than 5 or 10 users who are not satisfied with the way the theme handle the color section height. That’s why we provided a temporary solution because we cannot alter the script permanently unless majority of the users complain about it. I’m sorry but you will have to follow the temporary fix we provided. I will suggest that you follow this one because IMO there is actually no problem with the color section height calculation as explained here:



    Out of 60,000+ Enfold users, only a fraction would actually encounter this bug, because it has to do with a specific type of configuration. It seems to me that the users that those users that have encountered it have politely requested a fix. A casual search shoes that there are at about 5 threads related to this bug in the last 6 months. That is not insignificant.

    Heathcliffe has eloquently demonstrated that it is indeed a bug and not a matter of implementation. But just to offer a different perspective: If there is a layout configuration which results in onscreen navigation elements being invisible to the users, then that is definitely a problem.

    As for the suggested solution link (2nd and 3rd full-screen video sections are too long due to header):
    Earlier in this thread it has already been shown that this solution does not work correctly.



    : Thank you for the info. Did you try this one?

    EDIT: Correct link:

    If you’re not satisfied with the result, we’ll ask Kriesi to check the thread.

    Best regards,



    You can also try this user’s modification:



    When you have to point your users to numerous topics with various suggestions on a fix / explanation and even you guys post the wrong link, it would suggest this is indeed a problem. If you’re driving a car and turn the steering wheel left and the car goes right you might think there was a problem – but if the manufacturer told you this was by design, you may still argue that the design is wrong.
    I accept that you have 60,000 users – that’s because Enfold is an amazing theme and you guys rock. I know you listen to your user base and that’s why I contribute to various posts and submit tickets occasionally. However, sometimes, I don’t have time to do this, other times I give up because it’s perhaps too technical or time consuming to make the changes vs the improvements that would result.
    The fact is, as @The_Rhyme_Animal says, not everybody uses ALL features. Not ONE of the Enfold demo themes uses this feature.

    I have 12 licences for Enfold so please accept 12 suggestions for a fix :)

    (I have just had a look at 3.4.1 – fantastic work guys) !

    All the best,



    When you have to point your users to numerous topics with various suggestions on a fix / explanation and even you guys post the wrong link, it would suggest this is indeed a problem.

    I don’t know what you mean by this. I copy pasted the wrong link but then you can actually find the correct link right below the previous one.

    Anyway, I’ll ask Kriesi to look into this. Please wait for his response.




    I accept that you have 60,000 users – that’s because Enfold is an amazing theme and you guys rock.

    have 12 licences for Enfold so please accept 12 suggestions for a fix :)

    Thank you for the kind words but then providing 12 suggestions for a single issue is not something we can do here. And I don’t think this particular issue will require that many fix. If you can spend a little time to do the suggestions we ( and other users ) provided on the previous thread, it will help a lot. If the fix doesn’t fully solve the issue, we can then look into the issue again and figure out what’s missing .




    I’m a little confused here. So I do not have a Child theme yet. I know how to create one and install one and will do that.
    Do I edit the main shortcodes.js file and then change the Child Functions file or do I copy the shortcodes.js file into the child theme folder ?
    Do I need to create a child theme sub folder first called js and then copy the shortcodes.js file into that and then edit that and the child theme functions.php file?


    (on another note, I have changed the Theme Name: in my child settings on another site but when I right click the site page and view source, it says Theme Enfold. Should it not say the Child Name ?)



    We provided another solution in the following link so you don’t have to copy the shortcodes.js file in the child theme folder. All you need to do is to add the code in the child theme’s functions.php file:



    Howdy guys,

    i was having the exact same problem and just wanted to share my “hack” for this.

    I just took the avia icon element, put it into the section, gave it a name and copied the css of the scroll down arrow (just the lines you need).

    Looks like this:

    #top .your-custom-id {
      animation:avia_fade_move_down 2s ease-in-out infinite;
      margin:0 0 0 -40px;
      text-shadow:rgba(0, 0, 0, 0.4) 0 0 3px;

    Maybe it helps you!



    Thanks for sharing that @alexanderduenchem.



    Thanks for the suggestion @alexanderduenchem much appreciated

    I’m not very technical but I did try this. I ended up with just an animated arrow that you couldn’t click above my circle image at the top of the section lol.

    I also tried @ismeal suggestion of editing the functions.php file (i now have a child theme), but that didn’t do anything.

    You can see my page now on the live site:

    I have just accepted that this is how it is. But when you show a page like this to a developer, I think it is hard for them to say this is how it should work ;)

Viewing 30 posts - 1 through 30 (of 30 total)
  • The topic ‘'Scroll down arrow' lands too low on page with 'Header is invisible and appears'’ is closed to new replies.