[{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/2024\/11\/22\/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden\/#Article","mainEntityOfPage":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/2024\/11\/22\/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden\/","headline":"Der einfachste Weg ein WP-Widget in die Mobile Navigation einzubinden.","name":"Der einfachste Weg ein WP-Widget in die Mobile Navigation einzubinden.","description":"Die Widgets von WordPress kann man beliebig auf der Seite positionieren, au\u00dfer in der Navigation. In der Desktop Version ben\u00f6tigt man diese auch nicht in der Navigation, aber in der Mobilen Version werden diese ausgeblendet.In meinem Fall wollte ich gern die Widgets: „Letzte Posts“, „Letzte Kommentare“, „Kategorien“ und „Archiv“ in der Mobilen Navigation haben: Erstelle […]","datePublished":"2024-11-22","dateModified":"2025-08-20","author":{"@type":"Person","@id":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/author\/andre\/#Person","name":"andr\u00e9","url":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/author\/andre\/","identifier":1,"image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/02b89515a8983413a92fa86f8d30ef244e0fdd4c0909091e0b93501c492c9a56?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/02b89515a8983413a92fa86f8d30ef244e0fdd4c0909091e0b93501c492c9a56?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Person","name":"andr\u00e9 dietze, konstanten.net"},"image":{"@type":"ImageObject","@id":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/wp-content\/uploads\/2024\/11\/Screenshot-from-2024-11-22-01-53-58-3.jpg","url":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/wp-content\/uploads\/2024\/11\/Screenshot-from-2024-11-22-01-53-58-3.jpg","height":492,"width":1066},"url":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/2024\/11\/22\/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden\/","about":["CMS","WordPress"],"wordCount":349,"keywords":["Mobile Navigation","Widget","WordPress"],"articleBody":"Die Widgets von WordPress kann man beliebig auf der Seite positionieren, au\u00dfer in der Navigation. In der Desktop Version ben\u00f6tigt man diese auch nicht in der Navigation, aber in der Mobilen Version werden diese ausgeblendet.In meinem Fall wollte ich gern die Widgets: „Letzte Posts“,  „Letzte Kommentare“, „Kategorien“ und „Archiv“ in der Mobilen Navigation haben:Erstelle eine neue Seite mit dem Namen des Widgets, z. Bsp. „Archiv“[Seite bearbeiten] F\u00fcge das Widget „Archiv“ in die neu erstellte Seite „Archiv“ ein und speichere die Seite ab[Men\u00fc bearbeiten] F\u00fcge die neu erstellte Seite zum Hauptmen\u00fc dazuBis hier her sollte alles kein Problem bzw. m\u00fcssen wir jetzt den neu erstellten Men\u00fcpunkt „Archiv“ in der Hauptnavigation in der Desktop Version noch ausblenden, das kann man einfach mit CSS und der Anweisung „display:none“ machen.Wir ben\u00f6tigen f\u00fcr das ausblenden noch die ID vom Men\u00fcpunkt „Archiv“. Die einfachste M\u00f6glichkeit diese ID herauszufinden ist im FireFox mit dem Add-on bzw. der Erweiterung „Web developer“. Wenn man „Web developer“ im FireFox installiert hat befindet sich im Context-Men\u00fc der rechten Maustaste der Punkt [Inspect], wenn man den Men\u00fcpunkt „Archiv“ im Hauptmen\u00fc markiert und [Inspect] bet\u00e4tigt wird der ausgew\u00e4hlte Bereich im HTML-Code angezeigt. Im HTML-Code unter id=“meineID“ findet man die automatisch von WordPress erstellte ID.In WordPress findet man die ID vom Men\u00fc, wenn man \u00fcber dem Men\u00fcpunkt f\u00e4hrt(Design -> Men\u00fcs -> Hauptmen\u00fc  -> Men\u00fcpunkt) sieht in der Statusleiste im FireFox Browser die Url, am Ende der Url befindet sich das K\u00fcrzel\/$_GET[‚variable‘] : edit-menue-item=215 (nach dem Gleichheitszeichen befindet sich immer der Wert der \u00fcbergeben wird).Jetzt muss man nur noch das „edit-“ entfernen und den Wert hinzuf\u00fcgen und schon hat die ID auf die man dann mit CSS zugreifen kann, also: #menue-item-215Um das CSS einzuf\u00fcgen, benutzt man am besten den „Customizer“, unter dem Punkt „Zus\u00e4tzliches CSS“ kann man einfach den nachfolgenden CSS-Code einf\u00fcgen(Bitte die eigene ID verwenden bzw. im CSS eintragen):.navigation #menu-item-215{\tdisplay:none;}22. November 2024"},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"2024","item":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/\/2024\/#breadcrumbitem"},{"@type":"ListItem","position":3,"name":"11","item":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/\/2024\/\/11\/#breadcrumbitem"},{"@type":"ListItem","position":4,"name":"22","item":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/\/2024\/\/11\/\/22\/#breadcrumbitem"},{"@type":"ListItem","position":5,"name":"Der einfachste Weg ein WP-Widget in die Mobile Navigation einzubinden.","item":"https:\/\/mediengestaltung-webdesign-webentwicklung.de\/blog\/2024\/11\/22\/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden\/#breadcrumbitem"}]}]