> For the complete documentation index, see [llms.txt](https://docs.nickarce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nickarce.com/bricks-mega-menu/docs/getting-started/importing-template.md).

# Importing Template

## Step 1: Choose an SCSS Compiler

***

There are many compilers out there and my favorite without a doubt is[ wpcodebox](https://wpcodebox.com/) but there are many others to choose from. Here are some options. 

### Paid Options

* [WPCodeBox](https://wpcodebox.com/)
* [Advanced Scripts](https://www.cleanplugins.com/products/advanced-scripts/) 
* [Scripts Organizer](https://dplugins.com/downloads/scripts-organizer/)

### Free Options

* [SCSS WP Editor](https://wordpress.org/plugins/scss-wp-editor/)

## Step 2: Import SCSS

***

1. Navigate to your downloaded files and find the folder labeled "SCSS"
2. There are two versions of the SCSS to choose from:
   1. "Mega-menu-Vxx.scss" for the users that use Automatic CSS
   2. "Mega-menu-no-acss-Vxx.scss" for the users that do not use Automatic CSS
3. Open your prefered file in either a text editor or code editor like VS Code.
4. Copy all of the file contents
5. Navigate to your preferred script plugin and paste the SCSS into a new SCSS file or SCSS partial **IF you know how to use partials.**

{% hint style="info" %}
if you are using a script plugin that allows you to make live changes to the website its recommended you turn on that function while making changes to reduce the number of page refreshes necessary.
{% endhint %}

## Step 3: Create a Header Template

***

If you already have a header template skip to step 4

1.  Navigate to your wordpress dashboard and go to bricks > templates
2. Click "add new" at the top left
3. Give it a title of something like "Header"
4. On the right hand side choose the template type "header"\
    ![](/files/UXqwGMwVjMOX6BVcRdGC)
5. Click publish
6. Click edit with bricks
7. Once bricks editor loads click on the gear icon and then click "template settings"\
    ![](/files/mW3k6zlgxLWiT3QXB8aH)
8. Click conditions
9. Add condition
10. Select "Entire Website"

## Step 4: Importing Header JSON

***

1. Navigate to downloaded files
2. Find the folder named "Header Template"
3. Open the .json file in a text editor or code editor
4. Copy all of its contents
5. Navigate back to the bricks editor
6. Click inside of the page canvas
7. CMD+V or CTRL+V to paste the header directly into the builder
8. Save the bricks template on the top right

{% hint style="info" %}
The browser may ask you for permission to paste and some browsers may not let you paste at all. If that fails try pasting from the chrome browser
{% endhint %}

## Step 5: Add JS

1. navigate to your downloaded files
2. Open the folder named "js"
3. open the .js file in a text editor or code editor
4. copy its contents
5. add a code element below your new header element

   <figure><img src="/files/MUyt90f0bBY3g2ZYPiZH" alt=""><figcaption></figcaption></figure>
6. paste code into the javascript area

   <figure><img src="/files/PN1XVylqtspge1YkHLbz" alt=""><figcaption></figcaption></figure>
7. Turn on "execute code" and "Render without wrapper"

   <figure><img src="/files/k5e1s5EurkJGVeOMoMqX" alt=""><figcaption></figcaption></figure>
8. make sure to save your template!

{% hint style="warning" %}
if you decide to use a snippet manager or load the js externally, please ensure to load the JS after the header elements as it wont work if the JS loads before
{% endhint %}