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?

3 Answers 3


The 2 ways recommended by Magento to override or extend the styles from a parent theme:

1. Simple way


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:

"Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles."


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 :

"You need to monitor and manually update your files whenever the parent’s _theme.less is updated."

2. Structured way


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:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';


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.

  • So lets say I have a Vendor_Namespace Folder, I add there another folder named "web/css/source/_extend.less" and the _extend.less-File in web/css/source/ will know where the corresponding file lies? Do I understand that correctly
    – Max
    Jul 4, 2016 at 12:28
  • Yes, just create the file web/css/source/_extend.less and put your styles in there. Jul 4, 2016 at 16:14
  • I has created a _extend.less file wicth import a _slider.less: <theme_folder>/css/source/ both files are in the same path, but not work, all rules in _slider.less was not found in .css generated files, I am in developer mode and run "php magento setup:static-content:deploy"
    – xzegga
    Jul 4, 2016 at 16:53
  • Have you deleted your browser's cache? Jul 5, 2016 at 1:12
  • 1
    Can i override <theme_folder>/css/source/lib/variables ? how i can change a variable of a less file?(lets say that i want to override the @button-background for example) - i need to write it inside _buttons_extend.less or i can override all the lin/web/css/source/lib/variables
    – Goldy
    Sep 13, 2016 at 13:47

I had a similar problem using Foundation. The official way to do this is to override the specific module's less file and modify the css there. It will then be picked up by Magento during compilation



Ultimately I ended up removing all of the default CSS files made by Magento. I found it much easier to write custom CSS, especially using a framework like Bootstrap, than try to override all of the various modules. You can do this in:



<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
  • Good way to commit stuff. But the question is about "extending" a full theme and adding more to it. Dec 1, 2017 at 3:26
  • No, the question is about overriding.
    – Black
    Jan 8, 2020 at 16:39
  • and where to add the custom css?? in the same file? Oct 21, 2020 at 6:25

Lets say you want to override styles-m.css, then put the copy in web/css of your theme, name it custom-styles-m.css.

Then use this code in your themes default_head_blocks.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
  • That's not going to work if you want to use LESS compilation... All of the LESS gets compiled from multiple sources into the two default styles CSS files.
    – zigojacko
    Nov 11, 2020 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.