Changing CSS files in Magento 2.1.2

Question

Currently trying to change the top menu background color, tried to change it from the CSS files, found out through firebug that the file pub/static/frontend/Venustheme/beat/en_US/css/styles-l.css is the one responsible for this,

And even tried to change it on firebug to confirm, turns out it actually is.

So I changed the css file and refreshed the page, but nothing changed, looked up solutions for this, flushed cache storage flushed Magento cache and flushed javascript/css cache through the admin interface, didn't work,

Checked the URL in core_config_data turned out to be correct, can anyone help with this? and is there a way to change the css files through the admin interface?

Also, what is the difference between beat and beat_child?

and does the less file affect that in any way?

Answer 1

You will need to compile LESS if you aren't already, the easiest way is to enable client-side compilation. Login to the admin and navigate to store > config > advanced > developer > front-end workflow and set it to client-side compilation (or something similar).

Then delete these two directories:

var/view_preprocessed
pub/static/frontend

Clear your caches (Magento and browser) then refresh. Your change should now be displayed.

Note: There are better ways of compiling such as Grunt/Gulp but that's out of scope for this answer.

Answer 2

Never work on Pub/Static/frontend folder directly. It's get generated automatically.

CSS and JS files for theme can be found in app/design/frontend/YOURTHEME/web folder.