Educon 2 Presets Editing
Riku Lahteenmaki
If I change color values in the Presets, they do not take effect.
Riku Lahteenmaki
Accepted AnswerThe simple solution was to add "!important" to the link color values:
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>a.active, .sp-megamenu-parent>li>a:hover { color: #ffffff !important; }
Now the header links keep the #ffffff value also with different mouse movements.
Asfakur Rahman Saikat
Accepted AnswerHi Riku Lahteenmaki,
Thank you for reaching out, and sorry for the inconvenience.
Before making changes to any preset, please enable Compile SCSS to CSS by navigating to Template Settings > Advanced > Compile SCSS to CSS as shown in this screenshot: https://prnt.sc/OkQiVnl0Y6Kz
After enabling this, the changes should take effect.
If the issue persists, please specify the exact section that is not changing and provide a screenshot for further assistance.
Best regards
Riku Lahteenmaki
Accepted AnswerHi Asfakur,
Thanks for the tip, however, it did not solve the whole problem. After setting 'Compile SCSS to CSS' I could get some modified Preset settings to show in the admin view, but not on the front-end.
What I would need to do, is change the header backround color, and header menu link color.
In the admin, I can change the header background color, but not the header menu link color.
However, no changes are showing in the front-end view.
Asfakur Rahman Saikat
Accepted AnswerHi Riku Lahteenmaki,
Sorrt for any inconvenience caused. Please find the details below:
-
Header Background Color: The changes should be working correctly. After saving your adjustments, ensure you reload the page. For viewing changes on the frontend, please clear your browser cache or use incognito mode.
-
Header Menu Customization: Custom css in Helix Ultimate To adjust the header menu color, you can use the following custom CSS:
.sp-megamenu-parent>li>a { color: rgb(240 14 110); }
Feel free to reach out if you have any further questions or need assistance.
Best regards
Riku Lahteenmaki
Accepted AnswerPlease can you find the reason why the header menu link color changes to the preset value, when mouse pointer moves to the dropdown area.
I have set:
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>a:hover { color: #ffffff; }
But the color #ffffff does not hold, when the pointer moves to the dropdown area.
Asfakur Rahman Saikat
Accepted AnswerHi Riku Lahteenmaki,
Thank you for your question.
Please note that when new elements are added to your site, your CSS styles may break. This is why certain customizations may not work as expected. To address this, please refer to the following customization guide: How to Change the Color of Submenu Items
After following the guide, if any specific CSS still does not work, please let us know which one, and we will assist you further.
Best regards.
Riku Lahteenmaki
Accepted AnswerHi Asfakur,
The submenu item colors are fine. I do not need to change them.
I only need to change the header menu link color, and it can be done with this:
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>a:hover { color: #ffffff; }
The problem is, when you hover the header menu link and move the mouse to the submenu area, then the header menu link color changes, although it should stay with the value #ffffff.
Please check the site given in the hidden area.
Asfakur Rahman Saikat
Accepted AnswerHi Riku Lahteenmaki,
Sorry for the inconvenience. I have tested your site, when I hover the header menu link and move the mouse to the submenu area, it stayed with the value #ffffff as per your requirements. may be you have solved the problem.
Feel free to ask if you have further questions.
Best regards.
Riku Lahteenmaki
Accepted AnswerHi Asfakur,
I could solve the issue, just by putting '!important' to the link color value:
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>a.active, .sp-megamenu-parent>li>a:hover { color: #ffffff !important; }
Now the submenu links keep their #ffffff value with every mouse movement.
Asfakur Rahman Saikat
Accepted AnswerHello,
I’m glad to hear your issue is resolved.
Using !important overrides conflicting styles, ensuring the specified color (#ffffff) takes precedence in all scenarios. Without it, other styles or specificity rules may override the intended value, which is why some styles might not work as expected.
Best regards