Building the Navbar

The Navbar is your site’s header: logo, navigation and any call-to-action buttons. In Shock it is a Global Section, which means you design it with Elementor and choose precisely where it appears — the whole site, or only certain pages.

Because it’s a Global Section, you can create more than one Navbar (for example, a transparent header for the homepage and a solid one everywhere else) and switch between them with display conditions.

Before you start

Build your navigation menu first, under Appearance » Menus. The Navbar’s menu widget pulls from the menus registered there. If you also want rich dropdowns, set up a Mega Menu and attach it to menu items.

Create the Navbar

1. Go to Shock » Global Sections and click Add New.

2. Give it a title such as Main Navbar (for your reference only — it isn’t shown on the site).

3. Set Section Type to Navbar.

4. Under Display Rules, choose where it appears — usually Entire Site. Add any Exclude Rules for pages that should have a different header (or none), such as a landing page or the checkout.

5. Click Update, then reopen the section and click Edit with Elementor to design it.

Reference image — replace before publishing16:9

The Shock » Global Sections edit screen for a new section, showing the Section Type field set to Navbar and the Display Rules panel with Entire Site and Exclude Rules options.

Design the header

Inside Elementor, build the header with Shock Core widgets. A typical Navbar contains:

• Logo — add your site logo (linked to the homepage) with the Image or Site Logo widget.
• Menu — drop in the Nav/Menu widget and select the menu you created under Appearance » Menus.
• Buttons — add a call to action such as Contact or Shop Now.

Use Elementor’s column and spacing controls to align the logo left and the menu and buttons right (or whatever layout your design calls for). Everything updates live as you edit.

Tip

Keep the header height and logo size modest on mobile. Preview at different breakpoints using Elementor’s responsive mode so the menu collapses cleanly into a toggle on small screens.

Sticky behavior

To keep the header visible as visitors scroll, enable the sticky option on the header section (in the section’s Advanced or motion settings, depending on your Elementor setup). A sticky Navbar keeps navigation within reach on long pages — pair it with a subtle background or shadow so it stays legible over page content.

Caution

Assign only one Navbar to any given page. If two Global Sections of type Navbar target the same location you’ll see two stacked headers. Resolve overlaps with Exclude Rules on one of them.

Show a different Navbar on specific pages

Create a second Global Section of type Navbar, design it, and give it Display Rules for just those pages (for example, a specific landing page). Then add the same pages to the Exclude Rules of your main Navbar so only one shows at a time.

Related Global Sections Overview · Mega Menu · Footer