# 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"\
5. Click publish
6. Click edit with bricks
7. Once bricks editor loads click on the gear icon and then click "template settings"\
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
6. paste code into the javascript area
7. Turn on "execute code" and "Render without wrapper"
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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.nickarce.com/bricks-mega-menu/docs/bricks-mega-menu-template/getting-started/importing-template.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.