diff --git a/docs/_config.yml b/docs/_config.yml
index 99e434e45c..b38bf9c745 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -3,7 +3,7 @@ repository: pmd/pmd
 pmd:
     version: 7.0.0-SNAPSHOT
     previous_version: 6.55.0
-    date: 27-June-2023
+    date: ??-?????-2023
     release_type: major
 
 # release types: major, minor, bugfix
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
index 5acf2a12af..2481f5e340 100644
--- a/docs/_layouts/page.html
+++ b/docs/_layouts/page.html
@@ -13,7 +13,10 @@ layout: default
    {% if page.summary %}
     <div class="summary">{{page.summary}}</div>
    {% endif %}
-    <div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
+    <details id="inline-toc-details">
+        <summary>Table of Contents</summary>
+        <div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
+    </details>
 
   {{content}}
 
diff --git a/docs/css/customstyles.css b/docs/css/customstyles.css
index a905fc995a..3324e4720f 100644
--- a/docs/css/customstyles.css
+++ b/docs/css/customstyles.css
@@ -1007,9 +1007,9 @@ span.soft {
     }
 }
 
-@media (max-width: 990px) {
+@media (min-height: 600px) and (min-width: 990px) {
     #mysidebar {
-        position: relative;
+        position: fixed !important;
     }
 }
 
@@ -1025,6 +1025,15 @@ span.soft {
     }
 }
 
+#inline-toc-details {
+    display: none;
+}
+@media (max-width: 1350px) {
+    #inline-toc-details {
+        display: block;
+    }
+}
+
 .col-md-9 img {
     max-width: 100%;
     max-height: 100%;
diff --git a/docs/js/customscripts.js b/docs/js/customscripts.js
index 3324a76545..20e128de1d 100644
--- a/docs/js/customscripts.js
+++ b/docs/js/customscripts.js
@@ -17,17 +17,6 @@ $(document).ready(function () {
         headers: 'h2,h3,h4',
     });
 
-    $('#mysidebar').height($(".nav").height());
-
-    // this script says, if the height of the viewport is greater than 600px, then insert position-fixed class,
-    // which makes the nav bar float in a fixed position as your scroll. If you have a lot of nav items,
-    // this height may not work for you.
-    var h = $(window).height();
-    //console.log (h);
-    if (h > 600) {
-        $( '#mysidebar' ).attr('class', 'nav position-fixed');
-    }
-
     // activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
     $('[data-toggle="tooltip"]').tooltip({
         placement: 'top',
diff --git a/docs/pages/release_notes.md b/docs/pages/release_notes.md
index 9532f360fb..9552c455ce 100644
--- a/docs/pages/release_notes.md
+++ b/docs/pages/release_notes.md
@@ -45,6 +45,8 @@ The remaining section describes the complete release notes for 7.0.0.
   * [#4582](https://github.com/pmd/pmd/issues/4582): \[dist] Download link broken
 * core
   * [#4621](https://github.com/pmd/pmd/issues/4621): \[core] Make `ClasspathClassLoader::getResource` child first
+* doc
+  * [#4521](https://github.com/pmd/pmd/issues/4521): \[doc] Website is not mobile friendly
 * apex-design
   * [#4596](https://github.com/pmd/pmd/issues/4596): \[apex] ExcessivePublicCount ignores properties
 * java
@@ -395,6 +397,7 @@ See [Detailed Release Notes for PMD 7]({{ baseurl }}pmd_release_notes_pmd7.html)
 * doc
     * [#2501](https://github.com/pmd/pmd/issues/2501): \[doc] Verify ANTLR Documentation
     * [#4438](https://github.com/pmd/pmd/issues/4438): \[doc] Documentation links in VS Code are outdated
+    * [#4521](https://github.com/pmd/pmd/issues/4521): \[doc] Website is not mobile friendly
 * testing
     * [#2435](https://github.com/pmd/pmd/issues/2435): \[test] Remove duplicated Dummy language module
     * [#4234](https://github.com/pmd/pmd/issues/4234): \[test] Tests that change the logging level do not work