When the Header Logo is Stacked it Disappears...Icon Stack

Support
#7

Hi There,

Thank you for providing the credentials here. There are still JS errors. See this: https://screencast-o-matic.com/watch/cbjbj3l7TB. Are you done with the plugin test? If the issue persists, please try switching from child theme to your main X theme just to make sure this is not coming from your customization. Other issues seems to be coming from incorrect html structure. Please note to always save a backup of your site.

I also notice that you are using a Cloudflare. Make sure to clear cache there or disable it while checking.

#8

Hi. Lely!

I switched themes from x child to regular X cleared cloudflare, browser, and website cache, but everything still appeared broken. Afterwards I installed a new theme and deactivated cornerstone, but i’m still seeing traces of it. Is it possible that it’s what’s causing the problem? Most of my website was customized using cornerstone so I hope not. How can any part of cornerstone be visible on my website with the exception of shorcodes i put in even if the plugin is deactivated?

I also switched to the main x theme and my website was still broken. Perhaps something is wrong with the X theme too nor could I have a bad copy of wordpress? I tried the Deque J query migrate plugin and it didn’t work either.This is very frustrating because I put a lot of work into my website and do not want to have to do it over. Please help. It looks really bad so i will keep it behind the maintenance page until it is done. I have already provided login credentials in a secure note.I am now going to switch back to X child theme again and reactivate corner stone so you guys can check things out. https://derekshirk.com/what-is-migrate-js-and-why-does-wordpress-enqueue-it/

Code:
JQMIGRATE: Migrate is installed, version 1.4.1
(index):133 Uncaught SyntaxError: Unexpected token <
(index):718 Uncaught SyntaxError: Unexpected token <
(index):739 Uncaught ReferenceError: Invalid left-hand side in assignment
(index):745 Uncaught SyntaxError: Unexpected token <
youtubebg.jpg:1 GET https://www.keianienterprises.com/wp-content/uploads/revslider/youtubehero/youtubebg.jpg 404 ()
VM901:1 i
VM901:1 ak
util.js:222 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

#9

Hi There,

Cornerstone is required in X theme. When checking for plugin conflict, don’t deactivate Cornerstone because shortcodes depend on that plugin.

Look for the following last line on your child theme functions.php file:
add_filter( ‘wp_default_scripts’, ‘dequeue_jquery_migrate’ );
That line of code is using curly quotes. It should return syntax error. Since it is not doing that means we’re seeing cache content. That line of code should be:
add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate');

WP Rocket has caching too. Try clearing cache there and then disable it for a while.

Upon more checking, I found that the root cause of those styling issues is because of the breakage on CSS and JS files. CSS and JS files are already minified by the theme. Cloudflare or plugin auto minification cause breakage on to this files resulting to this styling issues. The header is there, it is just behind the content of the widget. The widget display by default because of some missing CSS due to the breakage on the file. Disable autominification and then clear cache and it should fixed styling issues.

#10

Hi, Lely!

The code above that was placed in my functions.php file was put there because of the jquery migrate errors. I have since removed the code. I also had the code below inserted and I removed it too.However. I still need help figuring out why the jq migrate errors are happening in the first place within the theme. There was no difference when I went from regular X to child theme version in terms of my website still being broken. I even tried doing a backup restore and deactivated wp rocket temporarily too and the website was still broken after WordPress updates.

CloudFlare has passed it’s propagation period so I can’t say it’s the reason my website is not displaying properly although, there’s a possibility. This again is part of the conversation I had with a member of my hosting provider’s staff and he as well as articles, I have read on the web, state that the j guery migrate errors happen due to outdated things within a theme vs core WordPress updates. Which… I assume causes the conflicts. Now I’m not saying something is wrong with X or the child themes themselves because I love X and am using it on another website that is under construction (integrity stack) and I haven’t come across this issue just yet.

It can be something within the icon stack itself or perhaps outdated things within the demo Spa demo I selected. The google maps on the home page and most of the content was already within the theme by default. Right out of the box… it went along with my vision so I just customized it for my website and of course added some things to ensure the icon stack is fully functional for my needs. The google map and most of the elements were added using cornerstone.

The video (youtube hero) itself is the demo video that came with that particular rev slider. I like it so I didn’t change it. However, at times it gives me this error in the attachments I sent to you guys a support message during the time you were accepting support via email while you update your website. However, the issue remains unresolved. Please do what you can to help me. Thanks in advance.

Blockquote

JavaScript is the scripting language that runs on the client side - in the web browser.
The JavaScript errors can be inspected, using your browser’s developers tools:
Code:
JQMIGRATE: Migrate is installed, version 1.4.1
(index):133 Uncaught SyntaxError: Unexpected token <
(index):718 Uncaught SyntaxError: Unexpected token <
(index):739 Uncaught ReferenceError: Invalid left-hand side in assignment
(index):745 Uncaught SyntaxError: Unexpected token <
youtubebg.jpg:1 GET https://www.keianienterprises.com/wp-content/uploads/revslider/youtubehero/youtubebg.jpg 404 ()
VM901:1 i
VM901:1 ak
util.js:222 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

It seems that you have HTML elements within your page’s tags, which is incorrect JavaScript syntax, due to which the reported errors have been generated.
You will have to get in touch with your theme vendor, since the JavaScript is part of the theme’s functionality/scripts, so they can provide you with a patch(if there is such).

Blockquote

//Make sure any external scripts don’t require the functions.

function dequeue_jquery_migrate( &$scripts){
if(!is_admin()){
$scripts->remove( ‘jquery’);
$scripts->add( ‘jquery’, false, array( ‘jquery-core’ ), ‘1.10.2’ );
}
}

#11

Hi there,

Before we further continue and to make sure that every test we will make is not hindered by the cache, please disable your SiteGround’s cache and CloudFlare, please disable them until we find the cause of these issues. make sure WP Rocket is disable too.

And please backup your site as I’m going to disable a lot of plugins, some errors are originating from misplaced HTML.

Thanks for understanding.

#12

Hi, Iam!

I have deactivated WP Rocket, CloudFlare, and SiteGround’s Google page-speed Module. I have also taken the time to copy all files that have customizations from my child theme (i.e. footer.php, header.php, and functions.php). Additionally, within my child theme, I created a custom login folder and file and have also taken the time to copy them as well. In my findings and after clearing the browser’s cache too, when the child theme is active on the website without CloudFlare, WP Rocket and Google’s page speed module the pages appear normal after a few refreshes, with the exception of the stacked header, but I’m not sure which one if any of them is causing a problem… See this attachment for details:

However, with everything listed herein still deactivated the main version of X (Icon stack) still appears broken when activated. It’s really weird. I am beyond confused right now. Quite a bit of my website was designed using Cornerstone so please be mindful of that just in case something is wrong with the main/ child theme beyond repair and a fresh copy of X needs to be installed.These last thing I want to do is have to design this site all over again and go through the process with each plugin. Thanks in advance for your help. I appreciate it.

#13

Hi There,

I can see now that there’s a custom CSS that hides it. See this: https://screencast-o-matic.com/watch/cbjrQzlLB4. Please remove this part:. Since that’s the cause of missing logo, I didn’t disable any plugins. I just check but didn’t change anything.

Hope this helps.

#14

Thanks so much I can see it now. One last thing in reference to this. Is there a way to add a subtitle to the header in this stack? Here is a screenshot from my other website. I’m using the Integrity stack there.

#15

Hi!

I still need help figuring out why the J query migrate, the youtube video error in the screenshot above, and google map API errors occurred. Is this theme compatible with CloudFlare and if so what are the recommended settings? Are there still errors on my site? Is it safe to activate caching plugin or google page-speed module? Thanks for helping me resolve the header issue, but please also help me understand why my website was broken. I do not want to reactivate anything that was deactivated and have the website break all over again.

#16

There’s no option for subtitle. It could be possible with custom development but that would be outside the scope of our support.

I’m not sure what is causing the jQuery migrate and Youtube error but they’re most probably not theme related. Regarding the Google Map API error, check if UberMenu is loading the Google Map API. It should be disabled if you’re not using it. See http://sevenspark.com/docs/ubermenu-3/content/shortcodes/maps

There are errors but X is not causing it. You placed HTML inside a script tags. Please remove them. If you’re unsure where they are, please seek help from a third party developer.

The other error is related to Google Maps. Please see the previous suggestion regarding this.

Activating caching and other optimizations has its pros and cons. Regretfully, the setup depends per website so we couldn’t give specific advice for this whether it is safe or not. I recommend you seek help from a website optimization consultant like https://wpspeedguru.com/ regarding this.

X is compatible with Cloudflare but again, it depends on your overall setup (third party plugins, customizations, etc…). See https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/ for setup guidance.

Your site is broken due to a number of reasons specified above. Except for the Google Map error which might be caused by the UberMenu setting, the causes are not theme related but rather has to do with your content, customizations and optimization.

#17

Hi, Xian!

The codes you highlighted above are for SEO and work fine on every other website I’ve used them on without any issues, including the integrity stack on another website. So, they wouldn’t cause a website to break. Also, most of my custom CSS is placed in a plugin as opposed to the theme its self. Other alterations to the header and footer files are for SEO and basic site functionality. Because of Icon’s minimal style and my needs… for proper functionality, it was necessary. However, I was asked by your staff to deactivate CloudFlare, WP rocket, smooth scroll, and google page speed module whilst my site was broken… for troubleshooting purposes.

I just want to be sure what recommendations you guys have before I reactivate them so I don’t run into the same problems. Also, thanks for the article links I’ll check them out. As for the google map error it can not be related to Uber menu because I am not using it. The map was added through cornerstone.

#18

Hi there,

You may keep that SEO setup then :slight_smile:

The map error is because you didn’t add API key to the map in the 4th section. Please add google map API Key.

Then you may reactivate your optimization plugin and CloudFlare again, just make sure to purge/clean the cache before testing.

Thanks!

#19

Thanks so much. I’ll do just that and hope for the best.

#20

You’re welcome!

#21

Hi, Lely!

So here is the code I used in integrity stack to create the subtitle and other items in the image. However, it was added to the global header folder in integrity after copying the full navbar.php file. In the icon stack, it appears the nav bar is combined in the header file. Therefore. I’m not sure if I need to add it below .x-logobar or x-logobar-inner, but when added below it appears like so in the attachment.

I just need a little help adjusting it and knowing exactly where to put it in the icon stack. At present it is below the global navbar but above breadcrumbs in my child theme’s header.php file. So quite naturally it will appear only on pages where breadcrumbs are active because of where I’ve placed the code. I would like it to be a part of the header for every page and to sit just below the header logo as a subtitle.

Additionally, I’m trying to put the phone icon after the word call with a phone number and an envelope icon after the word email. I altered the code a bit, but it isn’t working properly.

Blockquote


Call:

Full Service Agency

<?php echo do_shortcode('[x_icon type="phone"] [x_icon type="envelope"]'); ?>
#22

Hi there,

You mean adding the static “Full Service Agency” text in breadcrumbs? Possible but it’s not present on pages with blank templates like this https://www.keianienterprises.com/services/. Else, it will destroy the current look of your blank templates. Hence, you can’t add it to every page, but you may try adding it manually through the builder as part of the content.

Could you try adding that code again? I don’t see it so I’m not sure how it’s exactly added through the source code. How should it look like and work?

Thanks!

#23

Hi, Rad!

I do not wish to add the text to the line where breadcrumbs exist at all. I’m trying to create “Full Service Agency” as a subtitle which sits directly below the header logo “Keiani enterprises.” Like in the example for Shop At KEI image which I posted earlier. I just placed the code there to give a general idea then took the screen shot. To my knowledge, there isn’t a navbar.php for icon stack. However, there is for integrity so inserting the code there was much easier. I honestly don’t even need the additional icons or shorcodes. My main focus is the sutitlke itself.

Blockquote

Call:
Full Service Agency
<?php echo do_shortcode('[x_icon type="phone"] [x_icon type="envelope"]'); ?>
#24

Hi There,

Please add the following code to Theme Options CSS

  a.x-brand:after {
    	content: "Full Service Agency";
    	font-size: .4em;
    	vertical-align: middle;
    	margin-left: 8px;
    	margin-top: 20px;
            display: block;
    }

Hope it helps!

1 Like
#25

Hi!

It was exactly what I hoped for. Thanks a million: However, position wise with the top margin at 10px (subtitle position preference) or 20px the subtitle fits perfectly, but the rev slider appears smushed with this change. I have attached two screenshots.

#26

Hi,

I am not sure which margin you are referring to.

I tried to change it and it didn’t affect the revslider.

See Video - https://www.screencast.com/t/OK7tFEzkr8hA

1 Like