JS Header Issues

I'm asking this to the community here, as well as support. Does anyone know how to improve the performance of this theme to prevent header items from jumping on page load/refresh? This problem is obvious on every theme demo - open the Plumber demo and see the main menu initially load beneath the logo then jump to it's correct position inline. I'm keen to use BeTheme but support have previously told me nothing can be done to fix this, and it looks really poor.

Inspection tools on Chrome return this error -

Optimize the order of styles and scripts (24)
The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.
css
dashicons.min.css
admin-bar.min.css
style.css
base.css
buttons.css
mfn-icons.css
grid.css
layout.css
shortcodes.css
variables.css
animations.min.css
colorpicker.css
jquery.ui.all.css
jplayer.blue.monday.css
prettyPhoto.css
responsive-1240.css
responsive.css
style-colors.php
style.php
css
css
custom.css
1 inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

Is it related?

There must be a way to resolve this problem and stop header items jumping all over the place when you move between pages.

Thanks,
Paul.

Comments

  • Hi Paul,

    this is not a bug but that's how javascript works. Because headers are quite advanced, the width of header must use javascript because otherwise it won't work properly. If you will send us url to page where you have this problem, we can check if it's possible to use fixed width in your case (everything depends on your current settings).

    Thanks!
  • This is a dummy site that a fixed width can be tested on - http://style960.com/falconwp

    I won't use Be on a live site unless this can be proved to be fixed. There are plenty of themes which provide various header options with JS that don't have this problem - Enfold being the best example.
  • Enfold does not have the same features and options as we got so it's not a right to compare them both. And as we mentioned above, this behavior can not be changed because that's how javascript works. Anyway, in your case, below css should help:
    #Top_bar .top_bar_left {
        width: 100% !important;
    }
  • Unfortunately that doesn't stop the page from jumping/moving. I couldn't hand over a site to a client with this problem, or advertise that same site as a portfolio piece. I would suggest this issue is looked into for future releases. Enfold aside, there are plenty of themes which do offer similar features (in relation to the header) that do not have this problem.
  • It works on 100%. We tested this already on our side as well and this is the only solution to do this because as we mentioned before, there is nothing to be fixed inside javascript. But if you don't understand it, then unfortunately we don't how to help you.
  • So when you open this URL and move between pages or refresh the page, the body of page doesn't move left then right very quickly? It does not work!!

  • Yes, exactly. It works because nothing moves at all. To be sure, we checked on 4 different computers and the same result.
  • I disagree. Tested on different computers, public broadband and corporate network connections. Page jump remains.
  • We also disagree. And because it's not only word vs word, we sent you on e-mail video where we recorded your website to show you that it works. Unfortunately we do not have nothing else to say in this case.
  • The 'jump' remains, but only in Chrome. Firefox and IE are fine.
  • We checked your website under Chrome yesterday and it works for sure as well. We can have a look once again but now url does not work.
  • Yeah something odd going on with the 4.2.1 upgrade and WP reverting to a broken theme. Fixed now. The jump does still occur in both Chrome and Canary. No jump at all with a different Chromium browser - Coowon.
Sign In or Register to comment.