CSS Ordering
Alex Walker
I added some new css code and it seemed to change previous changes I had made before. So, I demoted the new CSS lower down and the site was restored to how it looked originally. The question is, does CSS code need to be in paticular order or can it be added anywhere?
/Changes the font colour of the sitemap link/ .sp-module ul > li > a { color: #9598A0;
/This raises the mobile menu bar above the image on the right/ body.ltr #offcanvas-toggler.offcanvas-toggler-right{ position: relative; bottom: 35px; }
/How to hide offcanvas menu on PC/ @media screen and (min-width: 1025px) {
offcanvas-toggler {display: none !important; visibility: hidden;}
}
To fix the site I put the CSS code in this order:
/This raises the mobile menu bar above the image on the right/ body.ltr #offcanvas-toggler.offcanvas-toggler-right{ position: relative; bottom: 35px; }
/How to hide offcanvas menu on PC/ @media screen and (min-width: 1025px) {
offcanvas-toggler {display: none !important; visibility: hidden;}
}
/Changes the font colour of the sitemap link/ .sp-module ul > li > a { color: #9598A0;
Why would this change in order make a difference?
Rashida Rahman
Accepted AnswerHi there!
Thanks for your query!
Note, that CSS precedence happens at CSS property level. Thus, if two CSS rules target the same HTML element, and the first CSS rule takes precedence over the second, then all CSS properties specified in the first CSS rule takes precedence over the CSS properties declared in the second rule. Maybe, it does conflict with any of the previous code!
However, where did you put them, please? Actually you need to put on the custom css.
Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Hope this helps!
Best Regards
Alex Walker
Accepted AnswerThank you! I did put all the CSS in the custom CSS box you suggested. It must be the order I placed them in. All is working well now.