Using Avada theme and not sure what version of Bootstrap they have integrated, but on mobile when I open a modal it scrolls the page to the top. I've tried a few solutions from the wild, but none have worked so far.
Using Avada theme and not sure what version of Bootstrap they have integrated, but on mobile when I open a modal it scrolls the page to the top. I've tried a few solutions from the wild, but none have worked so far.
Share Improve this question edited Jun 15, 2018 at 4:01 wazz 5,0885 gold badges22 silver badges36 bronze badges asked Jun 1, 2018 at 15:10 NotaGuruAtAllNotaGuruAtAll 5338 silver badges21 bronze badges1 Answer
Reset to default 11I just experienced the same issue on Avada 5.5.2. Here is the exact question my coworker emailed me this morning.
I'm working on the *******. website. The modal windows work as they should on desktop. However on mobile, when a modal link is clicked the modal window pops up just fine, but it also scrolls the page back to top. Avada includes a # in the href line when using these bootstrap functions, and won't let me remove it.
So, here's what I tried, without success: ....
After going in a lot of incorrect directions, the solution that worked for me was one simple css tweak. Add the code below labeled "solution" to your child theme, or directly into your Avada Options as done in the screenshot.
fusion-10.min.css
The style sheet fusion builder creates is forcing fixed positioning.
.ua-mobile .modal-open {
position: fixed;
overflow: hidden;
}
Solution
Override the fusion style sheet as such.
.ua-mobile .modal-open {
position: relative;
}