JS Header Issues

style960 · April 2015

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

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.

Albert · April 2015

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!

style960 · April 2015

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.

Albert · April 2015

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;
}

style960 · April 2015

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.

Albert · April 2015

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.

style960 · April 2015

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!!

http://style960.com/falconwp

Albert · April 2015

Yes, exactly. It works because nothing moves at all. To be sure, we checked on 4 different computers and the same result.

style960 · April 2015

I disagree. Tested on different computers, public broadband and corporate network connections. Page jump remains.

Albert · April 2015

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.

style960 · April 2015

The 'jump' remains, but only in Chrome. Firefox and IE are fine.

Albert · April 2015

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.

style960 · April 2015

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.

JS Header Issues

Comments