CSS Ordering - Forum | JoomShaper
Solved Templates

CSS Ordering

Asked by Alex Walker 5 years ago Last activity 5 years ago

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?

Accepted answer

Marked as the solution
Rashida Rahman Staff

Hi 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.

https://prnt.sc/pu705g

https://prnt.sc/pu70zn

Hope this helps!

Best Regards

2 more replies

Alex Walker Asked this

Thank 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.

Rashida Rahman Staff

Really glad that all is okay now:)

Log in to reply.