Can I override a scss style in Prestashop?

Question

I'm using a default theme in Prestashop 1.6 and I have a problem. What I'm trying to accomplish is to simply move the navbar 25px higher. I know that I need to remove or change

#block_top_menu {
padding-top: 25px;
}

in blocktopmenu.scss, which is located not in the modules directory, but in theme's directory, which I presume is supposed to override the default style. When I disable it in the browser Inspector tool, it changes exactly the way I want it to, but it obviously doesn't save.

I edited the file changing 25px to 0px. When I reloaded the page, nothing changed and the inspector still shows the code as if I never modified it. So I edited the blocktopmenu.css from the modules category, adding !important, like so:

#block_top_menu {
padding-top: 0px !important;
}

hoping to override the scss. Still no changes happened. In desperation, I deleted the scss file from the server. Still no change and the Inspector shows the file as if it was there.

I'm out of ideas. Should I somehow clear prestashop's cache or something? Please help.

EDIT: I cleared the cache. No changes.

Answer 1

File default-bootstrap/sass/modules/blocktopmenu/css/blocktopmenu.scss compiles into default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

If you have found the .scss file, there must also exist a corresponding .css file.

Now most users just modify .css file directly and there is nothing wrong about it, but if you're doing lots of styles changes (like changing color scheme for the entire website) it's probably better to change the .scss files and compile them into .css. if you change a theme variable in .scss, it will be changed everywhere it has been used. This way you only need to edit one place instead of X places.

To work with .scss you need two tools: sass and compass. You need to google installation instructions for your operating system.

Once these tools are installed on your system, you need to run a command in the console in the theme folder (because different theme = different styles):

/var/www/themes/theme1/ > compass build

running compass build in the theme folder will compile .scss files into .css and places them in css folder (of the theme).

Answer 2

You add this code in block top menu.scss file but using wrapper class for that particular id like:-

  $block-top-menu{padding-bottom:25px!important;}
  div.[your wrapper id which wrapes the element]#block_top_menu{padding-bottom:$block-top-menu;} 

It only over rides that particular position not the whole scss.

Answer 3

you need to process SCSS to create a CSS file... (the browser only reads CSS)

that said Prestashop imports many CSS files the main one is global.css and then most modules have specific stylesheets,
if you use dev-tools you can easily see what's setting the margin and what you have to modify,usually block top menu has a css file named superfish-modified.css;

also be aware that PS has a built in caching system...