<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mobile Navigation</title>
	<atom:link href="https://mediengestaltung-webdesign-webentwicklung.de/blog/tag/mobile-navigation/feed/" rel="self" type="application/rss+xml" />
	<link>https://mediengestaltung-webdesign-webentwicklung.de</link>
	<description>mediengestaltung webdesign webentwicklung</description>
	<lastBuildDate>Tue, 19 Aug 2025 23:14:55 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Der einfachste Weg ein WP-Widget in die Mobile Navigation einzubinden.</title>
		<link>https://mediengestaltung-webdesign-webentwicklung.de/blog/2024/11/22/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden/</link>
					<comments>https://mediengestaltung-webdesign-webentwicklung.de/blog/2024/11/22/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden/#respond</comments>
		
		<dc:creator><![CDATA[andré]]></dc:creator>
		<pubDate>Fri, 22 Nov 2024 00:48:38 +0000</pubDate>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Mobile Navigation]]></category>
		<category><![CDATA[Widget]]></category>
		<guid isPermaLink="false">https://mediengestaltung-webdesign-webentwicklung.de/?p=248</guid>

					<description><![CDATA[Die Widgets von WordPress kann man beliebig auf der Seite positionieren, außer in der Navigation. In der Desktop Version benötigt man diese auch nicht in der Navigation, aber in der Mobilen Version werden diese ausgeblendet. In meinem Fall wollte ich gern die Widgets: &#8222;Letzte Posts&#8220;, &#8222;Letzte Kommentare&#8220;, &#8222;Kategorien&#8220; und &#8222;Archiv&#8220; in der Mobilen Navigation haben: [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Die Widgets von <a href="https://de.wikipedia.org/wiki/WordPress" target="_blank" rel="noreferrer noopener">WordPress</a> kann man beliebig auf der Seite positionieren, außer in der Navigation. In der <a href="https://de.wikipedia.org/wiki/Responsive_Webdesign" target="_blank" rel="noreferrer noopener">Desktop Version</a> benötigt man diese auch nicht in der Navigation, aber in der <a href="https://de.wikipedia.org/wiki/Mobile_Website" target="_blank" rel="noreferrer noopener">Mobilen Version</a> werden diese ausgeblendet.<br><br>In meinem Fall wollte ich gern die Widgets: &#8222;Letzte Posts&#8220;,  &#8222;Letzte Kommentare&#8220;, &#8222;Kategorien&#8220; und &#8222;Archiv&#8220; in der Mobilen Navigation haben:</p>



<ol class="wp-block-list">
<li>Erstelle eine neue Seite mit dem Namen des Widgets, z. Bsp. &#8222;Archiv&#8220;</li>



<li>[Seite bearbeiten] Füge das Widget &#8222;Archiv&#8220; in die neu erstellte Seite &#8222;Archiv&#8220; ein und speichere die Seite ab</li>



<li>[Menü bearbeiten] Füge die neu erstellte Seite zum Hauptmenü dazu</li>
</ol>



<p>Bis hier her sollte alles kein Problem bzw. müssen wir jetzt den neu erstellten Menüpunkt &#8222;Archiv&#8220; in der Hauptnavigation in der <a href="https://de.wikipedia.org/wiki/Responsive_Webdesign" target="_blank" rel="noreferrer noopener">Desktop Version</a> noch ausblenden, das kann man einfach mit <a href="https://de.wikipedia.org/wiki/Cascading_Style_Sheets" data-type="link" data-id="https://de.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank" rel="noreferrer noopener">CSS</a> und der Anweisung &#8222;display:none&#8220; machen.</p>



<p>Wir benötigen für das ausblenden noch die ID vom Menüpunkt &#8222;Archiv&#8220;. Die einfachste Möglichkeit diese ID herauszufinden ist im FireFox mit dem Add-on bzw. der Erweiterung &#8222;Web developer&#8220;. Wenn man &#8222;Web developer&#8220; im FireFox installiert hat befindet sich im Context-Menü der rechten Maustaste der Punkt [Inspect], wenn man den Menüpunkt &#8222;Archiv&#8220; im Hauptmenü markiert und [Inspect] betätigt wird der ausgewählte Bereich im <a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language" target="_blank" rel="noreferrer noopener">HTML-Code</a> angezeigt. Im <a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language">HTML-Code</a> unter id=&#8220;meineID&#8220; findet man die automatisch von WordPress erstellte ID.</p>



<p>In WordPress findet man die ID vom Menü, wenn man über dem Menüpunkt fährt(Design -&gt; Menüs -&gt; Hauptmenü  -&gt; Menüpunkt) sieht in der Statusleiste im FireFox Browser die <a href="https://de.wikipedia.org/wiki/Uniform_Resource_Locator" target="_blank" rel="noreferrer noopener">Url</a>, am Ende der <a href="https://de.wikipedia.org/wiki/Uniform_Resource_Locator" target="_blank" rel="noreferrer noopener">Url</a> befindet sich das Kürzel/$_GET[&#8218;variable&#8216;] : edit-menue-item=215 (nach dem Gleichheitszeichen befindet sich immer der Wert der übergeben wird).<br>Jetzt muss man nur noch das &#8222;edit-&#8220; entfernen und den Wert hinzufügen und schon hat die ID auf die man dann mit <a href="https://de.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank" rel="noreferrer noopener">CSS</a> zugreifen kann, also: #menue-item-215</p>



<p>Um das <a href="https://de.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank" rel="noreferrer noopener">CSS</a> einzufügen, benutzt man am besten den &#8222;Customizer&#8220;, unter dem Punkt &#8222;Zusätzliches CSS&#8220; kann man einfach den nachfolgenden CSS-Code einfügen(Bitte die eigene ID verwenden bzw. im <a href="https://de.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank" rel="noreferrer noopener">CSS</a> eintragen):</p>



<pre class="wp-block-code"><code>.navigation #menu-item-215
{
	display:none;
}</code></pre>


<div class="wp-block-post-date has-small-font-size"><time datetime="2024-11-22T01:48:38+01:00">22. November 2024</time></div>]]></content:encoded>
					
					<wfw:commentRss>https://mediengestaltung-webdesign-webentwicklung.de/blog/2024/11/22/der-einfachste-weg-ein-wp-widget-in-die-mobile-navigation-einzubinden/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
