For the style customization like this, you can use Google chrome or Firefox inspect element. What I usually do is hover on any HTML element (i.e. button, tag, text, …) you want and right click on it and then click on inspect element, it will show you which CSS/LESS class it is using and which CSS/LESS file and the path to this element on the right side. then you can go to the file and replace it with new CSS/LESS you change.
In this case: http://prntscr.com/hgof1y
You can see that the navbar is declared with dark color (333333) in the file:
[root]/templates/ja_megastore/less/navbar.less
In this file, you see this:
.navbar-default {
background-color: @navbar-default-bg;
which means that it’s taking value from navbar-default-bg variable and you can change color here
If you’re familiar with less and want to change variable, all variables are declared via this file: [root]/templates/ja_megastore/less/variables.less
Open this file, you will see this:
@navbar-default-bg: #333;
This change is applied in LESS file so if your site is running with development mode, just refresh front-end to see the change, if development mode is off, you need to access template manager section and compile less to css.
After changing background color of menu to white, for example, you will need to change color of text in menu (as by default, text in menu also has white color), just right click on any text and inspect this element and do the same steps like above.
I hope this makes senses.
domir21.
