Activating child theme causing site issues

Currently on Pro 1.2.7

Would like to add a child theme. I know, I should have done this in the beginning, but with the additional css option, I rarely even need one.

Anyway, after activating the Pro child theme, my site makes some unfortunate changesā€¦ navmenu items appearing that I previously had hidden at certain breakpoints, and various other styling issues. For example:

navmenu before activating child theme:

navmenu after activating child theme:

Why does this happen when no core files have been modified?

Site: https://tinyurl.com/yd5rdb6o

Why not update my theme first? This is why:

: (

Can you help fix this? Thank you

Hello @armintz,

Thanks for writing in! :slight_smile:

This could be a cache related issue. Please try clearing your style cache by going to Pro > Settings.

If by chance you still have the issue, can you share to us your Wordpress URL/User/Pass in a secure note so we can take a closer look?

Thank you.

Is this only an option in newer versions of Pro?

Hello @armintz,

Thanks for updating thread.

We introduced the ability to clear style cache in version 2.0. Users can clear style cache under Pro > Settings > System. https://cl.ly/3G2D132b0R00

I suggest you to first update Pro to the most recent version 2.0.4 and see how it goes. I am sharing the tutorial that you can take a look to update Pro Theme.

Thanks.

Iā€™ve cloned my site so that this can be diagnosed in a more appropriate environment:
https://riseabovetest.wpengine.com/

After updating the theme, the issues I pointed out in the original post are present.

Secure note with login added to original message.

Hi,

I installed a child theme in your cloned site and none of the issues are present.

Please clear your browser cache and check again.

Thanks

Iā€™ve cleared server cache and browser cache already, this isnā€™t a caching issue.

If you would compare my first link:
https://tinyurl.com/yd5rdb6o

to the cloned site that Iā€™ve updated Pro on:
https://riseabovetest.wpengine.com/

you can clearly see the navmenu is a mess after updating the themeā€¦ hamburger menu appears no matter which screen width youā€™re viewing, padding issues causing line breaks in navmenu links, text inside the ctaā€™s in the navmenu is cut off, etc. Iā€™ve also noticed other sections on the home page lost their styling after the theme update.

again, the only reason iā€™m updating the theme is because you said this was required to access the ā€œstyle cacheā€ introduced in 2.0ā€¦ something you wanted me to test because of the issue i noticed after activating the child theme.

Hi there,

I am not sure why this is happening on your website but the settings are clearly changed comparing to the original one and I could not find the reason why this is happening in your installation.

You will need to go to the new installation and compare the options with the old one and fix the necessary changes. I see only this happening on the header.

So, for example, I changed the showing of the hamburger menu, you will need to check the container flex options to fix the two line menu items issue and that kind of stuff.

Double check the option differences between the header in the new and the old installation.

I do not have any other suggestion to give as this is an edge case and I never encountered such an issue before.

Thank you for your understanding.

backtracking to ā€œdouble check the option differences between the header in the new and the old installationā€ shouldnā€™t need to happen unless there is a known bug with your updates.

Itā€™s not just the header / navigation where my changes disappear after the theme update, Iā€™ve found other problematic areas too. For example, about a third of the way down on the home page, there is this section here where the font turns dark gray / impossible to read:

Youā€™ll see on my original site (before the update) this is not an issue:

Between both my organizations Iā€™ve purchased about 30 X licensesā€¦ this one is no different than the rest (no core files being modified, and a typical install for me server-side as well as itā€™s on WPEngine hosting where I have a dozen X theme sites).

If you arenā€™t willing to look into this, I can hire a developer, but a big reason I use your theme is for support. Iā€™m not asking for custom development, just genuinely trying to figure out why an update seems to knock off my changes.

Hello There,

Thanks for updating in! Where exactly can we find the live site or the staging site? The original site is using wpengine and it is clear not the live site that may have been updated. Could you please provide us the two urls so that we can compare it?

By the way, activating a child theme will be the same as activating a new theme. Some of your settings may changes. It is important that before and after you activate a child theme, you must make sure that you have your Theme Options settings saved in a file so that you can import it later on when you have activated the child theme to make sure that all your settings were in tact. All of this is possible by making use of the Theme Options manager or previously known as the Customizer Manager which can be found in X > Validation.
Please check this out: https://theme.co/apex/forum/t/addons-customizer-manager/77

Hope this helps.

I donā€™t like to post the actual URLs because these threads end up indexed in search engines, but I think it will be easier in this case.

Dev site on Pro 1.2.7:
http://weriseabove.wpengine.com/

Dev site on latest version of Pro:
http://riseabovetest.wpengine.com

Iā€™ll get into the Child theme update after I figure out why the Pro update is causing issues.

Hello There,

I have compared both of the urls and I only found one thing that is absent in the test site. This custom css:

.x-section.bg-image.parallax .x-text * {
    color: #fff;
}

This code is present in the original site and absent in your test site. This code apparent were added in the WordPress Additional Custom css and this is why it may not have taken when you copied the customizer/theme options settings. You must have cloned the site completely so that all settings were included in your new test site.

Hope this explains it briefly.

ā€œThis code apparent were added in the WordPress Additional Custom css and this is why it may not have taken when you copied the customizer/theme options settings. You must have cloned the site completely so that all settings were included in your new test site.ā€

Sorry, not really sure what you mean here. When I first cloned the site, everything was there - no issues. I can clone it again to show you this. Itā€™s after updating the theme (or adding the child theme) that things disappear.

Youā€™re correct that this code below was missing from the ā€˜Additional CSSā€™ section and causing the text color issue in that one area on the home page that I pointed out with the screenshots:
.x-section.bg-image.parallax .x-text * {
color: #fff;
}

I donā€™t know why this css disappeared after updating the theme, but it looks like ALL of the css in the additional css area disappeared as well. Iā€™ve added it again, but am still experiencing header menu issues. For example:

Navmenu around 1220px breakpoint in header of dev site on Pro 1.2.7:

Navmenu around 1220px breakpoint in header of dev site on latest version of Pro:

Hello there,

Thanks for updating in!

Thereā€™s no need to clone it as I can confirm with a diff checker tool that there are no differences between the CSS on the Additional CSS and Global CSS section on both OLD DEV and NEW DEV sites.

For the header issue, you need to duplicate the header you have on your OLD DEV site and import it to your NEW DEV site. To do this, simply follow steps below:

  1. Go to Pro > Theme Options > Header of your OLD DEV site.
  2. Click Save As Template, and rename it to the header name of your choice. E.g. Main_1

  1. Go to Pro > Templates, check Main_1 header, then click Download Template. After you click it, a main_1.tco file will be downloaded into your PC/Mac.

  1. Now, login into your NEW DEV site, go to Pro > Templates and import the main_1.tco file.

  1. Once done, go to Pro > Headers, then select Main_1 template, then add the template name. For this example use Main_1.

  1. Then click MAKE GLOBAL option and save the changes when a prompt comes out.

Hope this helps.

Made it to step 2, not seeing ā€œSave as Templateā€. Iā€™m guessing you didnā€™t yet introduce this in the version of Pro that Iā€™ve pointed out that Iā€™m using.

Hi ,

I just checked and the save template is there as expected.

Please clean your browser cache and try it again.

If you are in a different installation make sure to have PRO theme updated to the latest version.

Thanks

Are you looking at the right site?
http://weriseabove.wpengine.com/

Hi armintz,

You are right, ā€œTemplate Managerā€ feature was first introduced in Pro 2.0.0.

You will need to add the custom CSS classes (hm1, hm2, etcā€¦) appearing in this screenshot to your header bars in the new website as well:

This can be added to the ā€œCustomizeā€ tab as in this screenshot:

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.