Update X from 10.3.9 to 10.4.x changes navigation layout

[ralphw]

Hello,

I’ve updated X theme from 10.3.9 to 10.4.x version. This resulted in a change in the layout/design of the navigation: navigation arrows for sub navigation suddenly appear and the navigation is shifted a little bit because this “data-x-icon” (Font Awesome) element has a font-size of 1.5em.

There is an extra line of code compared to a website with X Theme Version 10.3.9: <i class="x-framework-icon x-framework-icon-menu" data-x-icon-s="" aria-hidden="true"></i>

How can I repair this?

Of course I can set the visuability of the “data-x-icon” to “hidden” and set the font-size to “0” but is this really a clean solution (without affecting other parts of the website)?

I’m using Theme X “Child-Theme”.

Hope you can help me.

Kindly regards

Ralph

[prakash_s]

Hello Ralph,

Thanks for writing to us.

I would suggest you please add this custom CSS code to the Global CSS to get rid of your issue.

.x-navbar .desktop .x-nav>li.menu-item-has-children i.x-framework-icon.x-framework-icon-menu:before {
    content: '\f078' !important;
    font-size: 12px !important;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[ralphw]

Thank you, Prakash. This works fine. I added extra code for mobile navigation, because the mobile navigation symbol changed from single arrow to double arrow after the X Theme update.

I just wonder how an X Theme update changes the code so much that I have to apply extra CSS code?

Kindly regards,

Ralph

[ruenel]

Hello Ralph,

You should be adding the CSS to the child theme’s style.css or in the Cornerstone > Theme Options > Custom Code > Global CSS so that it will not be overwritten when you update the theme.

Best Regards.

[ralphw]

Hi Rue,

thanks for your hint, but it’s not about the new CSS code I added. I always have done it in the way you suggested.

My question is: How can it be that an X Theme update changes the X Theme code so much that I have to apply extra CSS code to restore the layout/design of navigation?

When I updated from 10.3. to 10.4 an extra line of code in the navigation pops up which has not been there before and it destroys the layout/design of navigation.

I have these kind of problems in two other X Theme instances and it seems to be a problem with FontAwesome.

Has this update changed anything with Fontawesome that I need to know?

Kindly regards,

Ralph