Solved Make transition to sticky smoother

Hi,

I have set a contact row and menu to be sticky on this site - http://176.74.20.8/~patonandco/contact-us/

It works great but there's a bit of a visual jolt when scrolling starts - is there a way to make the transition smoother and easier on the eye?

Thanks,

Jonathan

 

Thanks, that does look better.

Is there another way of making the additional contact row (above the logo and menu) stick to the top? I did it by using the Divi Scroll Effects and setting the contact row to "Stick at top" then added top: 31px !important to .is-sticky .free-sticky.

This works but I've found that when I use the visual editor now the first row of text content below the banner image is sticking to the top of the page that I'm trying to edit (there's no logical reason for this, but it started after I added the code above along with the Divi Scroll Effects on the contact row above the logo and site menu).

If there's a way of making the top contact row stick using a Divi Header class and/or css please can you advise? I can then turn off the Divi Scroll Effects (which seem to be causing the issue when editing).

Thanks.

 

Thanks, but if I do that the black contact bar at the top disappears behind the row containing the logo and site menu when scrolling.

 

Thanks for getting back to me. I added free-sticky to the black bar and removed the Divi Scroll Effects (from the same bar) and also removed the CSS you mentioned and a big gap appeared between the black contact bar and the site menu: https://ibb.co/09fdzVm

Just to confirm, I want both the narrow black contact bar (with telephone number/email) and the blue full width menu below to be sticky, but only the dark blue site wide menu/logo row should shrink in height on scroll.

Currently the black bar makes use of Divi Scroll Effects to make it stick, and the full width menu uses free-sticky. If I add free-sticky to both rows it doesn't work, that's why I used Divi Scroll Effects for the top black row and added the CSS above to ensure that the full width menu sits below the black contact bar when the user scrolls.

This works onload: https://ibb.co/FxrVxb3

And it works on scroll: https://ibb.co/1X66fSm

The problem I have is that with this technique when using the visual builder it is causing content further down the page to be sticky (making editing impossible on some pages).

Using the Divi Header plugin is there a better way to make two rows sticky (with just the menu resizing on scroll)?

 

No problem: http://176.74.20.8/~patonandco/buy/home-buyers-guide/

 

If you try again you should see the gap.

 

Perfect thanks - and sorry for the confusion, I'm trying to do too many things at once!