Importing Template

Step 1: Choose an SCSS Compiler

---

There are many compilers out there and my favorite without a doubt is wpcodebox but there are many others to choose from. Here are some options.

Paid Options

• WPCodeBox

• Advanced Scripts

• Scripts Organizer

Free Options

• 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.

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.

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

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

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!