Animated ElementsCard Nav for GoHighLevel
A navigation bar that opens downward into cards, each one a menu item with its own click action and optional sub items.
- Variants shown
- 10
- Dependencies
- None
10 ways to run it
Every one of these is the real element with different settings. Press play again to watch any of them from the start.
Controls, grouped the way you build
- The bar
- Menu
- Call to action
- How it opens
- Text style
- Bar & card style
- Background & spacing
Everything it does
- Stick to the top with a distance from the top
- wordmark, image or no logo
- logo size per breakpoint
- centred or beside-the-menu logo
- bar height per breakpoint
- fill the column or a set width
- up to six cards, each with up to eight sub items
- every card and sub item with its own click action
- up to two calls to action with the full GoHighLevel action list, or none
- hide the buttons on mobile
- start open
- open time, card stagger and motion feel
- menu button side and width
- close after a click or an outside click
- entrance with scroll or load trigger
- typography and alignment
- bar, wordmark, menu button and button colours
- one card style for all cards: background, hover, title and sub item colours, icon, height, gap, corners, padding and sizes per breakpoint
- block background, spacing and border
How it actually behaves
It sticks to the top of the published page by default, at a distance you set, while the builder and the preview keep it in place so it never covers what you are editing. It renders its own markup and never touches the section around it. The menu is edited like WordPress's: collapsed rows, sub items indented beneath their card, every entry with the full GoHighLevel action list. An empty menu hides the menu button, and a dead logo image falls back to the wordmark.
How to add Card Nav to a GoHighLevel page
- 01
Open the element panel
In the page builder, click the + button to add a new element.
- 02
Go to Widget Marketplace
In the left menu, select Widget Marketplace.
- 03
Find Animated Elements
Locate the Animated Elements widget by Funnelslayer in the installed apps list.
- 04
Drag and drop it into the page
Drop the widget where you want it. The Web Widget Settings modal opens on the element gallery: "Select an element to start with".
- 05
Select an element and continue
Choose an element (Animated Counter, Typing Animation, and more), then click Continue. Search by name or by what it does, or use the category rail on the left to narrow the list. You can switch elements later without losing your settings.
- 06
Customize it
Use the element's settings to customize everything to match your brand. The live preview updates as you go, with separate desktop and mobile views.
- 07
Set the page up once
Add the Page Settings element once, near the top of the page. It holds your brand colors, the page fonts, the border new elements start with, and how the page scrolls: a styled or hidden scrollbar, smooth scrolling to linked sections, an eased mouse wheel, a scroll progress bar and the text selection color. Every other element can link its colors to a brand color, so changing one repaints the whole page. It renders nothing for visitors, and it is optional: without it, every element keeps the colors it was given.
Common questions
- Can I make a sticky navbar in GoHighLevel with this?
- Yes. Every navbar can pin to the top of the published page with an offset, and several can slide away on scroll and return when the visitor scrolls back up. Pinning applies on live pages only, so the bar never floats over the builder canvas.
- Do the menu links scroll to sections on the same page?
- Yes. Each link has its own click action, and scroll to element is one of them. Add Page Settings to the page and you can also set smooth scrolling with an offset, so a section does not land underneath the pinned bar.
- Is the full-screen menu accessible?
- The overlay menus are built as dialogs: inert while closed, focus stays inside while open, and Escape or a click beside the menu closes them.
Morph Menu Nav
A navigation bar whose dropdown morphs size and glides between menu items, with a mobile menu and sticky pinning.
Pill Slide Nav
A navigation bar with a pill strip of links and a solid pill that slides under the pointer.
Circle Reveal Menu
A logo and round menu button whose full-screen menu grows out of the button in a circle.
Resizable Navbar
A full-width navbar that tightens into a floating frosted pill as the visitor scrolls.
Bubble Menu
A logo bubble and a round menu button that open onto a field of big tilted pills popping up one by one.
Staggered Menu
A side panel that sweeps in behind coloured layers while big links rise into place one by one.