Lost custom main navigation styling in Classic Header

[Priscilla]

Hello, I’m using the Classic Header for Pro, and added a couple of social media icons in the top bar. While doing this, somehow, the main navigation’s styling (which I spent many days getting just right) all got erased! Now it’s just showing a standard style, which is extremely different from the original navbar menu style.

Is there a way to get my original CSS back? After applying a change, it seems to have saved the change PERMANENTLY; I never confirmed saving the new style. The theme should NEVER just apply a change and save it automatically, it should ask the user whether or not they want to apply the change! (If they do not, then allow the user a way to revert the change.)

I can’t tell you how frustrating this is! The X theme’s (albeit powerful) interface is confusing and non-intuitive.

Here are some screen shots of what the original navbar looked like:

• on hover, the red highlight was a horizontal bar of about 7px that was underneath the text…
  

• I did a TON of custom styling: colour-coding a couple different sections of the site – Commercial topics were navy blue; Residential topics were smoke blue, and hovering over different parts of the nav bar showed the corresponding colour.

Here is what the site looks like today:

My hunch is that my old styling is still there somewhere; I just have to find a way to suppress the new style from showing.

Your help / expert advice would be greatly appreciated. Thank you in advance.

[Joao]

Hi There,

As this involves customization out of the box of the theme you will need to check the new classes assigned to the menu elements and make the changes on the CSS you have add to Theme Options CSS.

Hope it makes sense.

[cirrus7]

Hello,

Why the change in the classes to the menu elements? It’s a given that there will be customizations out of the box of the theme. Also the custom classes were also removed.
I don’t know why you guys would do this. And what’s the point of using the child theme if an update is still gonna break our website.
Do you expect us to remember the old default classes before and go over a very long stylesheet and update them with the new default classes. Which I did that with the footer, but now I see the navigation menu is affected as well, it’s a lot of work wasted and additional work to do as this includes the responsive design adjustments too.

Well, can we know what’s the new default class naming of the menu elements? and what was the old?

Thank you.

[rad]

Hi there,

Sorry for the confusion, and let me clarify this issue

1. Custom CSS is not deleted can can’t be deleted by the theme. I recommend restoring your site back to when it still working, it’s the only way to get the copy of your CSS.

2. CSS and Class names are different things, Class name could change but your custom Class name should stay intact since it’s saved in the database. And any CSS applied to that custom Class name should stay intact as well, but as you said, the CSS is deleted which will render your Class name useless. Even if the default class names are changed, your CSS and Custom Class name should still work (I recommend following the #1 to get the copy of those CSS.

3. Styling and changes aren’t saved automatically, you can only save them manually (hence, the save button). Or maybe I misunderstand it, would you mind providing more details or procedures?

May I know when these happened? Is this after the update or while you’re working? Please prevent opening multiple windows of the same page when working on it, you may end up saving the wrong one overwriting another.

Thanks!

[cirrus7]

Hello,

BTW, I am not the original poster, and my only issue was the change in the default CSS classes in the menu items, which is huge as I said.
I mentioned about the custom css class/id as when I click the “customize” tab, the class/ID fields are all blank even on the items that I’m sure I did add a custom css/id.
Anyway, I might have miss something because I can’t confirm for sure without checking on the stylesheet if indeed I added a custom class/id name for that certain element. But that’s not the important issue.

My real concern is why would X pro change its default class names for the menu items. As an example:
/* .fm3 class of ul menu changed to .e714-3 */
Meaning, all the customizations I did for the .fm3 class would not work anymore, and if unlucky enough, if those default class names were used in the responsive design as well, it’s significant additional work again.
How much more if those default class names were used as javascript selector, which fortunately I did not do any of that.

So that’s why Im asking why change something that could break a site.
And if im missing something, and you actually accounted for this issue, please let me know.

Thanks

[christopher]

Hi there,

The problem is that you took a wrong approach to depend on the auto-generated glasses such as the .fm3 and you will have a wrong approach to use .e714-3. These are all auto-generated ones that can be changed even without updating. If you simply add another element between the beginning of the header and the element in question the class will change.

Those classes are for the internal usage of the auto CSS generation of the settings that you do in the header builder and should not be used for the custom CSS development.

As my colleague mentioned before you need to use the Customize tab and add your unique classes or IDs for your changes. So please do that as soon as possible or you will lose your customization again by the slightest change in the order of the element or any changes that you do.

Now having said that we did fundamental changes in the new release of the theme to be able to support the Template Manager functionality, and that is why you see the change of the naming convention of the auto-generated classes. That does not debunk the fact that you should NOT use those classes anyway.

Finally, there is a new Element CSS functionality which you might be interested in regarding the customization.

Hope I could make things clear here. Thank you.