> For the complete documentation index, see [llms.txt](https://design-with-cracka.gitbook.io/bricksmegamenupro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-with-cracka.gitbook.io/bricksmegamenupro/elements/code-blocks.md).

# Code Blocks

Mega Menu Pro's CSS and JavaScript live in code blocks inside the header template. Bricks must have code execution on to run them. See [Installation](/bricksmegamenupro/getting-started.md#turn-on-code-execution).

Some steps below mention a **code manager**. That's a plugin that loads your CSS and JavaScript across the whole site, such as WPCodeBox. You don't need one: the code blocks work fine where they are.

***

## The code blocks

| Code block                                   | What's in it                              | Edit it? | Move it to a code manager?                                                             |
| -------------------------------------------- | ----------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
| **MENU Styles / Options**                    | Your CSS variables and JS options         | Yes      | Yes. The builder preview may stop updating as you edit, depending on the code manager. |
| **MEDIA QUERY** (Lite: **MENU Media Query**) | Mobile, offcanvas and sidebar styles      | No       | Only if you don't use offcanvas or sidebar mode. Those features break if it moves.     |
| **MEGA MENU Codes**                          | The main CSS and JavaScript               | No       | Yes                                                                                    |
| **SIDEBAR Codes**                            | **Full only.** Sidebar CSS and JavaScript | No       | Yes. You can delete it if you don't use sidebar mode.                                  |

**SIDEBAR Codes** is the only block you can delete. Deleting any other block breaks the menu, unless its code is in your code manager.

Keep the `data-stylesheet` attribute on the **MEDIA QUERY** block. Offcanvas and sidebar modes need it.

***

## Several headers on one site

If you have more than one header, you can move the shared code out of the headers. Then you edit and update it in one place.

* **Same styles on every header:** move the CSS and JS of one **MENU Styles / Options** block into your site-wide code manager. Then delete that block from every header.
* **Different styles per header:** keep **MENU Styles / Options** in each header.
* **MEGA MENU Codes:** move it to your code manager either way.
* **MEDIA QUERY:** move it too, unless a header uses offcanvas or sidebar mode. Those headers must keep it in the builder.
* **SIDEBAR Codes:** only keep it if you use sidebar mode.

If no header uses offcanvas or sidebar mode, you can move every block out and leave your header templates clean.

The [MMPro Updater](/bricksmegamenupro/updating.md) reads your settings from the code blocks in the header. Code you move to a code manager, you update by hand.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://design-with-cracka.gitbook.io/bricksmegamenupro/elements/code-blocks.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.