Der ElementsKit Nav Menu widget allows you to create fully customizable navigation menus in Elementor. You can build dropdowns and mega menus, along with a fully responsive mobile menu. It works inside a header/footer template built with ElementsKit
Navigation menus help organize your site’s structure. It offers dropdowns and a neatly arranged header layout. With the ElementsKit’s powerful elementor navigation menu widget you can design such menus easily. It is rich in features and easy to use.
Learn how ElementsKit Nav Menu works:
1. Enable Header/Footer module in ElementsKit → Modules.
2. Create a Header template In Kopfzeile Fußzeile and edit with Elementor.
3. Drag & drop the Nav Menu widget into the header.
4. Select your WordPress menu in Menu Settings.
5. Configure dropdown & mobile behavior (hover/click, breakpoints, hamburger menu).
Style your menu (fonts, colors, spacing, icons).
Key Features of ElementsKit Nav Menu #
- Verwenden existing WordPress menus.
- Dropdown & mega menu support.
- Völlig reaktionsschnell with mobile hamburger control.
- Custom styling for desktop and mobile menus.
ElementsKit Nav-Menü #
Zuerst müssen Sie Aktivieren Sie das Modul zum Erstellen von Kopf- und Fußzeilen.
Modul einschalten #
Access to Dashboard:
- Find ElementsKit
- Klicken Sie auf Module
- Find Header Footer Builder and turn it ON
- Änderungen speichern
- Next, go to ElementsKit Widgets
- Turn ON the Nav Menu widget
Create a Header #
- From ElementsKit click Kopfzeile Fußzeile
- Click Header
- Neue hinzufügen
TEmplate-Einstellungen #
- Einstellungen
- Titel- Geben Sie einen Namen für die Vorlage ein
- Typ- Header
- Bedingungen- Ganze Seite
- Activate/Deactivate- Auf EIN schalten
- Click Edit with ElementsKit
Anpassung #
Finden ElementsKit Nav-Menü and drag and drop it.
Content Tab – Im Content part, you will find the following setting options.
Menüeinstellungen #
- Select menu: Wenn Sie „Menü“ auswählen, werden die vorhandenen Menüs Ihrer Website angezeigt.
- Horizontal menu position: Menüpositionsoptionen sind Links, Mitte, Rechts und Blocksatz.
- Dropdown open as: Mach weiter Bewegen Sie den Mauszeiger oder klicken Sie.
- Runterfallen Indicator Icon: Sets the icon shown next to menu items that have a dropdown.
- Enable one page?: Toggle this option to “Yes” to enable smooth scrolling for a single-page website layout. Ensure your menu links are set to anchor tags that point to specific sections on the same page.
- Response Breakpoint: Select the screen size where the menu collapses into a mobile toggle. Choose between Tablet or Mobile to trigger the responsive layout.
This is how it works if you choose mobile and tablet responsive breakpoint.
Mobile Menüeinstellungen #
Along with the ElementsKit mega menu, the mobile menu in Elementor gives you full control over how your navigation looks and behaves on smaller screens.
- Mobiles Menü-Logo: Legen Sie ein Logo für die mobile Ansicht fest.
- Menü-Link: Behalten Sie die Standardeinstellung für die Startseite bei oder fügen Sie einen beliebigen Link in das Feld „Benutzerdefinierte URL“ ein. Wenn Personen auf das Logo klicken, werden sie zu dem angegebenen Link weitergeleitet.
- Hamburger Icon (Optional): Wählen Sie ein Symbol aus der Bibliothek oder laden Sie SVG hoch.
- Submenu Click Area: Wenn das Menü über ein Untermenü verfügt, können Sie ein Symbol für den Bereich festlegen.
Style the Nav Menu #
- Menu Wrapper: In diesem Abschnitt können Sie die Höhe des Menüs, den Hintergrundtyp, den Abstand, die Breite, den Radius des Menürahmens, den Abstand der Menüsymbole usw. anpassen.
- Menu Item: Menüelemente können hier anhand von Hintergrundtyp, Farbe, Rahmenabstand, Elementrand usw. gestaltet werden.
- Untermenüanzeige: To personalize the submenu indicator, you can change font size, color, border type, border width, border radius, etc.
- Submenu Item: Ebenso wie die Menüelemente können Sie in diesem Abschnitt die Untermenüelemente anpassen.
- Submenu Panel: Wenn Sie diesen Teil erweitern, können Sie den Untermenübereich mit vielen Optionen anpassen.
- Hamburger Menu: In diesem Abschnitt können Sie den Hamburger mit verschiedenen Symbolfarben, -größen, -positionen, -optionen usw. gestalten.
- Logo für mobiles Menü: Dieser Teil dient zum Anpassen. Dieser Teil dient zum Anpassen des Logos des mobilen Menüs nach Ihren Wünschen.
However, if you need even finer adjustments for your Nav Menu, you can always add custom CSS through Elementor’s Advanced tab.
Here we have prepared a nav menu example, which is a desktop view.
Bieten Sie Ihren Kunden mit dem einflussreichen Navigationsmenü-Widget von ElementsKit ein fantastisches System zum Auffinden ihrer Dinge. Nutzen Sie also jetzt das Widget, gestalten Sie Ihr Design ansprechend und sparen Sie Zeit.
