Theme update made Header Navigation and footer icons a mess

Hi,
After updating the theme, header navigation is broken, id’s name got changed and footer Font Awesome social icons all disappear
Updated the theme in development, Development link: http://almaraidev.wpengine.com/
You can see the proper header and footer in the production link, we have not updated the theme in production, Production link: https://www.almarai.com/

Hey @sparshik,

I’d first start with the Font Awesome icons. This has something to do with the Font Awesome 5 integration in Pro 2.2. Please read the answer to Why are some of my icons are appearing as an empty square? under the FAQ section of our Pro 2.2 Release Note.

You basically need to update your HTML that uses the old Font Awesome markup.

Regarding the header, custom ID you’ve assigned to the header will not change. It’s the generated classes that got changed. See screenshots below.

If you relied on the generated classes for you custom functionality, they will break. Please note that we do not recommend that you use the builder’s generated classes. Please always use your own ID or Classes.

Please have your developer update any custom code that uses the generated classes.

Thanks.

Thanks @christian_y for the reply
Regarding header navigation, we added navigation custom ID topbar-corporate for Corporate Menu and topbar-brand for Brand Menu, but after updating theme ul list id got changed to topbar-corporate-dropdown and topbar-brand-dropdown, dropdown text is adding automatically, attached the screenshot for reference.

Hi @sparshik,

That’s how it works now because ID should be unique for each element, you cannot have the same ID for the toggle (button) and it’s dropdown like before, that’s why dropdown gets the -dropdown suffix. You need to update any custom code you have that has something to do with that ID to adhere to the update.

And remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thanks,

Thanks @friech
We fixed the header navigation issue in all browser but in Internet Explorer, it is broken, Can you please help me with that issue.

Hey @sparshik,

I checked your site in IE11 and Edge browsers, the header navigation is working fine on my end, please clear your browser’s cache and see if this resolves the issue.

If the issue remains then please share some screenshots of the issue you’re having in IE so we can take a closer look. Thanks!

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