Title: CLS Problem mit dem Menü
Last modified: December 21, 2020

---

# CLS Problem mit dem Menü

 *  [Thomas Maier](https://wordpress.org/support/users/webzunft/)
 * (@webzunft)
 * [5 years, 6 months ago](https://wordpress.org/support/topic/cls-problem-mit-dem-menu/)
 * Hallo Thomas,
 * wenn ich meine Seite durch die PageSpeed Insights laufen lasse sticht der schlechte
   Wert für den Cumulative Layout Shift hervor.
 * Soweit ich das erkenne, liegt es daran, dass sich das Menü zunächst über alle
   Inhalte legt und dann geschlossen wird.
 * Das ist manchmal auch auf den Screenshots zu erkennen die [PageSpeed Insights hier](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fslowakei-reise.de%2F)
   macht.
 * Bevor ich da selbst Hand anlege dachte ich will du dir das vielleicht einmal 
   ansehen, da es auch andere Nutzer betreffen kann.
 * VG
    Thomas
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcls-problem-mit-dem-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Thread Starter [Thomas Maier](https://wordpress.org/support/users/webzunft/)
 * (@webzunft)
 * [5 years, 5 months ago](https://wordpress.org/support/topic/cls-problem-mit-dem-menu/#post-13840849)
 * Ich habe mir selbst eine Lösung gebastelt, auch wenn ich damit noch nicht ganz
   zufrieden bin.
 * Das Problem ist grundsätzlich, dass für mobile wie auch für die main Navigation
   der gleiche Code genutzt wird.
 * Auf mobile wird die Hauptnavigation geladen und dann per JavaScript verschoben
   und versteckt. Damit ist sie kurzzeitig auf Desktop sichtbar, insbesondere, wenn
   die JS und CSS Dateien minifiziert nachgeladen werden.
 * Nach ein paar Tests und viel unnützem Code war die Lösung recht einfach. Ich 
   habe mir jetzt folgendes in die `functions.php` meines Childthemes gepackt:
 *     ```
       function skr_custom_head_code() {
       	?>
       <!-- noptimize -->
       <style>
       /* prevents the main navigation from causing Cumulative Layout Shifts on mobile */
       @media ( max-width: 60em) {
       	#main-navigation-wrap { display: none; }
       	#sidebar-navigation #main-navigation-wrap { display: inherit; }
       }
       </style>
       <!--/noptimize-->
       <?php;
       }
       add_action('wp_head', 'skr_custom_head_code');
       ```
   
 * `<!-- noptimize -->` und `<!--/noptimize-->` verhindern, dass der Code von Autopmimize
   angefasst wird und es damit wieder zum Shift kommt.
 * Ich hoffe, das hilft jemandem.

Viewing 1 replies (of 1 total)

The topic ‘CLS Problem mit dem Menü’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/pocono/1.6/screenshot.jpg)
 * Pocono
 * [Support Threads](https://wordpress.org/support/theme/pocono/)
 * [Active Topics](https://wordpress.org/support/theme/pocono/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/pocono/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/pocono/reviews/)

 * 1 reply
 * 1 participant
 * Last reply from: [Thomas Maier](https://wordpress.org/support/users/webzunft/)
 * Last activity: [5 years, 5 months ago](https://wordpress.org/support/topic/cls-problem-mit-dem-menu/#post-13840849)
 * Status: not resolved