sorry if this has been previously resolved, I looked but couldn't find a solution. I am very new to jQuery, usually relying on the template's functionality.
Problem: 1- smoothscroll.js breaks scroll in Opera. 2- getting rid of it fixes scroll in Opera but breaks sticky header in all browsers 3- the version of Smoothscroll I have is not the latest. As soon as I update it to the latest one, scroll gets fixed in Opera but sticky header still breaks
Here are the links: Without a link to smoothscroll: http://econocard.ca/demo/no-smoothscroll.html
With template's default smoothscroll: /demo/smoothscroll-enabled.html
With the latest smoothscroll: demo/smoothscroll-latest.html
I am ok with no smoothscroll, it seems to be buggy and unnecessary in general, but I need to fix sticky header.
There problem is Opera for whatever reason, isn't adding the style="height: auto;"
to the <html>
element. All other browsers are doing this automatically from some unknown script. I tried tracing which function was applying this but it's not obvious at all.
Here's some solutions you can do to fix it:
Add a script to the bottom of the page which adds these style manually (probably the best solution):
<script>
$( document ).ready(function() {
$('html').css({"height": "auto"});
})
</script>
Remove the CSS entry (style.css:70
) which applies a fixed height of 100% to the <html>
element (this will definitely fix the problem but may cause other issues with your preloader animation).
html,
body {
width: 100%;
overflow-x: hidden;
}