Documentation
Nickarce.com
  • ⏳Changelogs
    • Mega Menu Template
  • 📃Docs
    • Mega Menu Template
      • Getting Started
        • Importing Template
        • Add Your Logos
        • Navigation Items
        • Importing Mega Dropdown Template
        • Dropdowns
          • Menu Dropdowns
          • Mega Dropdowns
        • Mobile
      • How To's
        • Change Mega Dropdown Container Width
        • How to Change Back Button Text
        • Add Scrollbar On Mobile Menu
        • Adding Custom CSS
        • Change Dropdown Activation Toggle
        • How to Query Loop Over Menu Dropdown
Powered by GitBook
On this page
  • Step 1: Choose an SCSS Compiler
  • Paid Options
  • Free Options
  • Step 2: Import SCSS
  • Step 3: Create a Header Template
  • Step 4: Importing Header JSON
  • Step 5: Add JS
  1. Docs
  2. Mega Menu Template
  3. Getting Started

Importing Template

PreviousGetting StartedNextAdd Your Logos

Last updated 2 months ago

Step 1: Choose an SCSS Compiler


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

Paid Options

Free Options

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. Click publish

  5. Click edit with bricks

  6. Click conditions

  7. Add condition

  8. 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!

On the right hand side choose the template type "header"

Once bricks editor loads click on the gear icon and then click "template settings"

📃
wpcodebox
WPCodeBox
Advanced Scripts
Scripts Organizer
SCSS WP Editor