-
Posts
-
Hi,
Working on a new Enfold theme child for a client project.
We have a full screen slider part way down the page. We’re linking to this with anchor links. When opened on website.com/page/#anchor we get the full screen slider with the floating menu above and the top of the slider at the top of the page, meaning we can see the “scroll down to next section” link at the bottom but when clicking the anchor within the page, the scroll goes to the bottom of our floating menu, and therefore the bottom of the full screen slider is below the fold.
Having tried a few solutions on this forum for making the full screen slider shorter (which don’t appear to work any more) and a number of ways using CSS to scroll “past” the point of the anchor by x pixels, I think the issue is with the smart scroll function.
What will we need to change to make the anchor #fullscreen_slider_0 smart scroll so that the top of the page is the top of the browser window, rather than the bottom of the floating menu?
Thanks.
Hi 24hourtrading!
The page seems to be behind a coming soon plugin so I’m not able to see the example.
The most straightforward solution would be to decrease the size a bit but we can take a look at both options once we can see exactly what setup you have to reproduce it and inspect the live code.
Regards,
DevinHi Devin – this is now out of coming soon, though can you just point out the file where the height can be (successfully) decreased. The former solution worked, but no longer.
Rob
In this case I’m not really sure what the best solution would or should be. The fullscreen slider should be adapting to the current screen size even with the nav menu but the scroll-to function also is setup to scroll down to just after the nav menu since we had so many complaints about that as well.
I’ve tagged Kriesi and Peter on the issue as the next step forward.
Hi!
Sorry for publicize the website via the screencast, the link is removed now. Regarding your issue, the problem is that the fullscreen slider scroll-to-next-section-arrow is meant to be used on the first element only, otherwise it won’t get the correct height, there are some workaround around this, try opening js/shortcodes.js and look for this line:
css += ".avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow{height:"+wh100_mod+"px;}\n";Paste the following code directly below it:
var wh100_mod2 = wh100, subtract2 = $('#wpadminbar, #header'); subtract2.each(function(){ wh100_mod2 -= this.offsetHeight - 1; }); wh100_mod2 = wh100_mod2 + 44; if(win.scrollTop() > 0){ wh100_mod2 = wh100_mod2 - 44; } css += ".avia-fullscreen-slider .avia-slideshow{height:"+wh100_mod2+"px;}\n";Best regards,
JosueHi Josue,
That works.
Side note – this only works if saving in the main Enfold theme files rather than the child theme we’ve created ( we can work around this ) – is this normal for the js folder to not work in a child theme?
Beside that one point many thanks, this is a working solution.
Rob
Hey!
You can use this code (functions.php) to enqueue a shortcodes.js file from the child folder:
// Replace shortcode.js function change_aviajs() { wp_dequeue_script( 'avia-shortcodes' ); wp_enqueue_script( 'avia-shortcodes-child', get_stylesheet_directory_uri().'/js/shortcodes.js', array('jquery'), 2, true ); } add_action( 'wp_enqueue_scripts', 'change_shortcodejs', 100 );Best regards,
Josue
- You must be logged in to reply to this topic.