-
Posts
-
Hello,
I’m experiencing a little problem. I’m using 100% height color sections on my home page, but unfortunatelly, when I click on the scroll down arrow, the next color section doesn’t fit the screen because of the sticky menu. Since the next section snaps to the bottom of the sticky menu on scroll, the bottom of the section goes further than the screen bottom.
Is there a css tweak I could add to make the 100% height color section always fit the screen when clicking on “scroll down next section” button, even with the sticky menu ?Hope this makes sense…
Thanks a lot!Hey maxgorelkine,
Please provide a link to the site/page in question so we can see exactly what you mean.
Best regards,
Jordan ShannonHi, thanks for your reply. Here is the link. You will see that when you click on the scroll to next section arrow, each color section (except the 1st one, since I put a transparent header) goes a little bit lower than the bottom of the screen (70px lower in my case since my sticky header is 70px high).
Hi maxgorelkine ,
You’ll need to modify shortcodes.js in order to adjust the height. First, you’ll need to add this in your child theme’s functions.php:
function change_shortcodejs() { wp_dequeue_script( 'avia-shortcodes' ); wp_enqueue_script( 'avia-shortcodes-child', get_stylesheet_directory_uri().'/js/shortcodes.js', array('jquery','avia-default'), 2, true ); } add_action( 'wp_enqueue_scripts', 'change_shortcodejs', 100 );then in your child theme, create a folder and name it js, copy shortcodes.js from the enfold theme and paste it inside the js folder of your child theme then tweak this file.
In line 487, you’ll see this code:css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container, .av-cell-min-height-100 > .flex_cell{height:"+wh100+"px;}\n";replace it with:
var newheight = wh100 - 70; css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container, .av-cell-min-height-100 > .flex_cell{height:"+newheight+"px;}\n";Let us know if this helps.
Best regards,
Nikko
- The topic ‘100% height color section doesn't fit the bottom of the screen with sticky menu’ is closed to new replies.