Menu not scrolling to correct area

[logoglo]

Affordable Logo Design & Graphic Design | Logoglo

So I have this code, to remove a small gap underneath the gallery images on the homepage:

.envira-lazy {
    padding-bottom: 0 !important;
    height: auto
}

But it casues the menu to act strange, so on 1st load, if you click “price” it scrolls to the menu. If I remove this code, the gap comes back:

But the menu works as it should, an scrolls to the prices area.

Weird right? How can I fix this?

Thanks.

[ruenel]

Hello @logoglo,

Thanks for reaching out. Be advised that the Lazy Load feature will only load and display the images once the image container is viewable in the browser. This is when you click on the prices, the page scrolls to the prices section but then it expands displaying the container with the images instead. Try to deactivate the Lazy Load feature and test the page again.

Kindly let us know how it goes.

[logoglo]

Yeah, it works, normally, but has that anoying gap under each image, so i added that ccs to take it away, and thats whats causing the issue, if I remove it, it works, lazyloading an all.

Strange how just getting rid of the gap causes this issue, any ideas why?

[ruenel]

Hello @logoglo,

There is nothing wrong with your custom CSS code and it does not affect the menu. What is causing it is the Lazy Loading feature. This is why as soon as all the images in your grid are already loaded, the price menu item link works smoothly. To test this, temporarily remove the grid on your page. You should see the price menu item link should always work without any hitch.

Hope this makes sense.

[logoglo]

I have removed the code, so you can see…code isnt there now, lazy loading is, and the menu scrolls fine

[ruenel]

Hello @logoglo,

Please edit your gallery. In your Envira Gallery settings, you need to set the “Margin Below Each Image” settings. to 0.

Kindly let us know how it goes.

[logoglo]

That was set when I made the gallery, like I said, its being added by that code, I just changed the code to 0px, and it does the weird menu thing…I cant think why.

[ruenel]

Hello @logoglo,

I have investigated the issue and it seems that the LazyLoad is the culprit for adding a 10-pixel bottom margin. This is also why as you add the custom CSS code, it will reload the grid items thus resulting in a conflict wherein the #price link no longer works for the first time. I would personally recommend that you add a 10-pixel Column Gutter Width instead to match the spacing below the image.

Hope this helps.

[logoglo]

Ok, strange that is has that effect though right? Im only taking away a 10px gap, I might get in contact with the plugin people and see what they can do. Thanks for your help.

[ruenel]

You are most welcome @logoglo.