[Zack GParticipant]

I have Navbar Positon set to “Fixed Top” and have turned on one page navigation at the bottom of the page. Nonetheless, the navbar on the site (click2recycle.ca) does not stay pinned to the top. Thoughts?

[ChristianModerator]

Hey Zack,

Please try to disable other plugins not included with X. Also, please ensure X and the plugins included are updated.

Thanks.

[Zack GParticipant]

When I first started building the site, the nav bar was pinned to the top of the screen. Since that point, I have installed only two plugins. I disabled both of them but the nav bar was still not pinned to the top. All other plugins are up to date. What are my next steps?

[RadModerator]

Hi Zack,

This is weird, you have 1.8.4 version but it shows x-v1_0_0 at body class. Could you try re-updating your x?

Also, you were having javascript errors that prevents x from working properly.

<script><!-- begin olark code -->
<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
f[z]=function(){
(a.s=a.s||[]).push(arguments)};var a=f[z]._={
},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
0:+new Date};a.P=function(u){
a.p[u]=new Date-a.p[0]};function s(){
a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
b.contentWindow[g].open()}catch(w){
c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify('6072-993-10-6952');/*]]>*/</script><noscript><a href="https://www.olark.com/site/6072-993-10-6952/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
<!-- end olark code --></script>

As you can see, you have multiple <script> opening and </script> closing.

Remove all that codes from your customizer’s custom javascript.

Then add this code at your child theme’s functions.php to correct it.

add_action( 'wp_footer', 'add_custom_script_with_sync_attr', 9999 );

function add_custom_script_with_sync_attr(){
?>
<!-- begin olark code -->
<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
f[z]=function(){
(a.s=a.s||[]).push(arguments)};var a=f[z]._={
},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
0:+new Date};a.P=function(u){
a.p[u]=new Date-a.p[0]};function s(){
a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
b.contentWindow[g].open()}catch(w){
c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify('6072-993-10-6952');/*]]>*/</script><noscript><a href="https://www.olark.com/site/6072-993-10-6952/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
<!-- end olark code -->
<?php
}

Then let us know.

Thank you.

[Zack GParticipant]

I believe I know the source of the second error. I had the Olark Javascript in the Customizer and a widget in the footer. I removed it from the Customizer so I believe the error you detailed is fixed.

Unfortunately, that didn’t fix the nav bar issue. I’m not sure how to re-update a plugin. What exactly do I do?

[RadModerator]

Hi Zack,

The above fix was for your Olark javascript, you have to remove it from your customizer(which you said you already did). The second set of code is to move your olark javascript into functions.php, so you will still have the script without error. That is just the first step.

Now, another set of errors were showing and coming from wordpress’s jquery-ui. But I can’t verify the original source. It’s much better if you could provide an admin login so I can do some checkup. You can post it as private reply and only us can see it.

Thank you.

[Zack GParticipant]

This reply has been marked as private.

[AlexanderKeymaster]

Hi Zack,

The javascript errors are coming from the “Form Maker” plugin. It’s loading it’s own version of jQuery and jQuery UI instead of using the native versions from WordPress. This creates a conflict, as X needs to use the original jQuery that is part of WordPress code.

The reason following their guide didn’t work, is because you don’t have any widgets on your home page. You may have added the code to a footer widget, but the footer widget areas aren’t enabled on your site. This is why it’s better to add the code in a child theme, because you can be certain it will always be loaded.

[Zack GParticipant]

I deactivated the Form Maker plug-in and it didn’t change anything. Are you sure the issue is not with the Contact Form 7 and Contact Form 7 Datepicker plugins? Also, is that what is causing the issue with the nav bar not remaining pinned to the top of the screen? You mention Javascript errors but you don’t mention what issues they are causing on the site.

Regarding the Olark code, I do have the footer widget enabled. See here – http://awesomescreenshot.com/0882uuhb6a. How else would the Olark code be loading if it were not enabled?

[RadModerator]

Hi Zack,

Javascript error were triggered from jquery itself but is builtin at wordpress core. Which unlikely to be the original source. The error will occur if the object that jquery’s processing is invalid or there was previous script that is faulty. Because there were many dependent script to jquery and given that you have different plugins, then we can’t tell what is the real issue right away.

http://awesomescreenshot.com/0132uza324

Tracing plugins that dependent to jquery lead me to “Contact Form 7 Datepicker”, which causing the javascript error. I guess, you already found it out?

Now, the next issue is this http://awesomescreenshot.com/0f62uzak25 , and will keep you posted.

About Olark error, something like this should not be added at customizer,

<script data-cfasync="false" type='text/javascript'></script>

Because customizer adds its own open and closing element. Adding your olark code having those element will cause errors, but we can’t remove those element as per olark requirement. So the second option is don’t use customizer, instead use functions.php without adding it in every page.

[RadModerator]

Hi Zack,

Regarding customizer issue, I created a blank page http://awesomescreenshot.com/0b92uzd214 and it does not have customizer issue which narrow our search. Could you try duplicating your homepage identically? Then try editing its content and check which part will still have conflict with customizer.

About navigation not pinning on top. I don’t see any error, and the script that do pinning was not actually attached to your header. Do you have any header customization done at your child theme before X’s recent versions? Could I request ftp login too if possible?

Thank you.

[Zack GParticipant]

This reply has been marked as private.

[Simon AParticipant]

Hey-o! You’ve added some custom CSS to icon.css at some point.

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: relative !important;
}

Change it to:

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}

And it’ll fix your nav bar issue (Or just delete it I guess) ;). Probably a good thing that you’ve fixed all your other issues too though…

[Simon AParticipant]

It’s on line 1362 by the way, right down the verrrrry bottom.

[Zack GParticipant]

Simon A – Thank you so much for the tip. It fixed the problem!

X Support – No need to investigate this issue any further. Thanks for your help.

[Author]

Posts