Custom Header Issues on Pro

Hi,

Thanks for taking a look of this situation presented while customizing the Header with Pro. I added Search Dropdown it was working fine until I added the second bar with the icons. Please advise.

When I make the second bar sticky and hide it initially it works…

Hi There,

Thanks for writing in!
Can you please send us your website details so that we can have a look.

Please provide following information:
Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
    All the best!

Thanks

Here is my Response…

Hi there,

The given credentials are not working for us, unfortunately. Would you please kindly double-check the information?

Meanwhile, I see that the problem must be the Z index option in the second bar which contains the icons. You will need to go to the bar which contains the icons and reduce the Z index value:

Bottom line the first bar Z index value should be greater than the second bar.

Thank you.

1 Like

Hi Christopher,

I hope you’re having a good day. Thank you so much, this works fantastic. The more I learn about the capabilities of the Pro, the more impress I am with its features. I appreciate the detail of your response. I was able to implement the fix myself and also fix the support account password on my WordPress for the future.

I have a follow up question, I plan to keep adding icons on the second bar, I noticed they get smaller as I increased the number of icons; (1) Is there’s any way I could stop them from getting resized? and also (2) Would it be possible for a user on a cellphone(mobile) to scroll horizontally on the second bar with the icons if I have a lot of them?

Hello There,

Thanks for updating again.

1.) This should be resolve when you enable the #2 solution.

2.) To scroll horizontally on the second bar with the icons, please enable the “Content Scrolling” option.

Hope this helps. Please let us know how it goes.

How I disable the icons from resize?

The content scrolling didn’t work.

Hi,

To prevent it from scaling, you need to choose standard and add a width.

With regards to horizontal scroll, I am sorry but that is not possible in pro headers.

Thanks

All my images are setup like that…

Hello There,

Please update the credentials so that we can check your custom header. At the moment the password is not working for us.

Thank you in advance.

Updated Password

Hi there,

Have you tried it without page seed optimization? I see some other codes on your site which is from Pagespeed, including image optimization. For the meantime, please add this CSS to your header custom CSS.

.x-image-preserve-ratio img {
width: 38px !important;
height: 55px !important;
}

Thanks!

1 Like

I’ll try this shortly. I am not sure what’s Pagespeed, is that coming from an installed plugin?

I tried the code below and it didn’t work.

header custom CSS.
.x-image-preserve-ratio img {
width: 38px !important;
height: 55px !important;
}

Hello There,

PageSpeed is affecting the site because you have have added this script or coming from a 3rd party.

<script pagespeed_no_defer="">//<![CDATA[
(function(){var g=this,h=function(b,d){var a=b.split("."),c=g;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var e;a.length&&(e=a.shift());)a.length||void 0===d?c[e]?c=c[e]:c=c[e]={}:c[e]=d};var l=function(b){var d=b.length;if(0<d){for(var a=Array(d),c=0;c<d;c++)a[c]=b[c];return a}return[]};var m=function(b){var d=window;if(d.addEventListener)d.addEventListener("load",b,!1);else if(d.attachEvent)d.attachEvent("onload",b);else{var a=d.onload;d.onload=function(){b.call(this);a&&a.call(this)}}};var n,p=function(b,d,a,c,e){this.f=b;this.h=d;this.i=a;this.c=e;this.e={height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth};this.g=c;this.b={};this.a=[];this.d={}},q=function(b,d){var a,c,e=d.getAttribute("pagespeed_url_hash");if(a=e&&!(e in b.d))if(0>=d.offsetWidth&&0>=d.offsetHeight)a=!1;else{c=d.getBoundingClientRect();var f=document.body;a=c.top+("pageYOffset"in window?window.pageYOffset:(document.documentElement||f.parentNode||f).scrollTop);c=c.left+("pageXOffset"in window?window.pageXOffset:(document.documentElement||f.parentNode||f).scrollLeft);f=a.toString()+","+c;b.b.hasOwnProperty(f)?a=!1:(b.b[f]=!0,a=a<=b.e.height&&c<=b.e.width)}a&&(b.a.push(e),b.d[e]=!0)};p.prototype.checkImageForCriticality=function(b){b.getBoundingClientRect&&q(this,b)};h("pagespeed.CriticalImages.checkImageForCriticality",function(b){n.checkImageForCriticality(b)});h("pagespeed.CriticalImages.checkCriticalImages",function(){r(n)});var r=function(b){b.b={};for(var d=["IMG","INPUT"],a=[],c=0;c<d.length;++c)a=a.concat(l(document.getElementsByTagName(d[c])));if(0!=a.length&&a[0].getBoundingClientRect){for(c=0;d=a[c];++c)q(b,d);a="oh="+b.i;b.c&&(a+="&n="+b.c);if(d=0!=b.a.length)for(a+="&ci="+encodeURIComponent(b.a[0]),c=1;c<b.a.length;++c){var e=","+encodeURIComponent(b.a[c]);131072>=a.length+e.length&&(a+=e)}b.g&&(e="&rd="+encodeURIComponent(JSON.stringify(s())),131072>=a.length+e.length&&(a+=e),d=!0);t=a;if(d){c=b.f;b=b.h;var f;if(window.XMLHttpRequest)f=new XMLHttpRequest;else if(window.ActiveXObject)try{f=new ActiveXObject("Msxml2.XMLHTTP")}catch(k){try{f=new ActiveXObject("Microsoft.XMLHTTP")}catch(u){}}f&&(f.open("POST",c+(-1==c.indexOf("?")?"?":"&")+"url="+encodeURIComponent(b)),f.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),f.send(a))}}},s=function(){var b={},d=document.getElementsByTagName("IMG");if(0==d.length)return{};var a=d[0];if(!("naturalWidth"in a&&"naturalHeight"in a))return{};for(var c=0;a=d[c];++c){var e=a.getAttribute("pagespeed_url_hash");e&&(!(e in b)&&0<a.width&&0<a.height&&0<a.naturalWidth&&0<a.naturalHeight||e in b&&a.width>=b[e].k&&a.height>=b[e].j)&&(b[e]={rw:a.width,rh:a.height,ow:a.naturalWidth,oh:a.naturalHeight})}return b},t="";h("pagespeed.CriticalImages.getBeaconData",function(){return t});h("pagespeed.CriticalImages.Run",function(b,d,a,c,e,f){var k=new p(b,d,a,e,f);n=k;c&&m(function(){window.setTimeout(function(){r(k)},0)})});})();pagespeed.CriticalImages.Run('/mod_pagespeed_beacon','https://afuego.com/','YddRYU7ik1',true,false,'qTVwgdfRidw');
//]]></script>

We wish to login to investigate further. The problem is that the credentials is still not working for us. Please have it updated again.

Thank you.

I have no idea where the PageSpeed script is coming from, here’s the new password… thank you.

Hi there,

It’s your host setting, it could be from your hosting panel. It’s best to contact your hosting provider and have it turned off before we move forward :slight_smile:

Thanks!

I don’t have a hosting control panel, I use AWS.

Hey There,

Could we have an access to where you have hosting your site? We really need to find out where this PageSpeed script is coming from.

Thanks.