How would you go about overriding the navigation styles for a custom theme when inheriting from the blank theme in Magento 2?
I have a theme.css
file in my app/design/frontend/<Vendor>/<theme>/web/css
folder, but I am aware that Magento 2 uses LESS. I can easily override the styles within my theme.css
stylesheet, but I don't want to have to keep using !important
.
Also, I am using Bootstrap 3, and I'm assuming that the styles from the blank theme will override any style instructions that match in Bootstrap. What is the best way to approach this?
Best Answer
The 2 ways recommended by Magento to override or extend the styles from a parent theme:
1. Simple way
Extend:
In your theme directory, create a
web/css/source
sub-directory. (You've already done this part) Create a_extend.less
file there.According to the documentation:
Override:
Instead of creating the
_extend.less
file, you create a_theme.less
file. In this case you need to copy all variables you need from the parent_theme.less
, including those which will not be changed. Then make your changes.According to the documentation, the drawback is :
2. Structured way
Extend:
This method lets you organize your code in a better way. Your changes will be structured. Instead of using a single
_extend.less
file to include all your changes, you create an extend file for each component from the Magento UI library you want to change.Say you want to extend styles from button and navigation components. In your theme directory create 2 files:
_buttons_extend.less
and_navigation_extend.less
, then add your changes for each component in the corresponding file.Then you create the
_extend.less
file adding this code:Override:
In your theme, create a copy of the file corresponding to the UI component you want to change (
_buttons.less
,_navigation.less
, etc) This file will override the_buttons.less
of the parent theme.It is important to notice the difference between override and extend.
You can read more on overriding and extending in this documentation or about CSS in Magento 2 in the Frontend Developer's Guide.