Skip to content

Fix menu behaviour on mobile devices. #5439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: current
Choose a base branch
from
+28 −12
Open

Fix menu behaviour on mobile devices. #5439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3870f48
Fix menu behaviour on mobile devices.
clydebarrow Oct 2, 2025
909cd53
Merge branch 'current' of https://github.com/esphome/esphome-docs int…
clydebarrow Oct 2, 2025
003cf2c
Cleanup
clydebarrow Oct 2, 2025
e1e9bb8
Cleanup
clydebarrow Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 21 additions & 7 deletions themes/esphome-theme/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -538,10 +538,6 @@ img.align-right, figure.align-right, .figure.align-right, object.align-right {
color: var(--nav-text);
}

.dropdown:hover .dropdown-content {
display: block;
}

/* Search Box Styles */
.nav-search {
margin-left: 20px;
Expand Down Expand Up @@ -1250,13 +1246,27 @@ figcaption {
.overlay.show, .sidebar-mobile {
display: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
}

/* Mobile, narrow screen. Open menu inline, hide some items */
@media (max-width: 700px) {
.desktop-only {
display: none;
}
.desktop-only {
display: none;
}
.dropdown-content {
position: relative;
width: 100%;
top: 0;
right: 0;
}
.nav-links.active {
overflow-y: auto;
}
}

/* Responsive */
/* @media (max-width: var(--mobile-width-stop)) { // sadly does not work */
@media (max-width: 1000px) {
Expand Down Expand Up @@ -1304,17 +1314,21 @@ figcaption {
z-index: 0;
display: none;
height: 0;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
Comment on lines +1317 to +1318
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Add WebKit scrollbar hiding for Chrome/Safari.

The code hides scrollbars for Firefox (scrollbar-width: none) and IE (-ms-overflow-style: none) but omits WebKit-based browsers (Chrome, Safari, Edge). This creates an inconsistent experience.

Add the WebKit scrollbar rule:

 .nav-links {
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none;  /* Internet Explorer 10+ */
 }
+.nav-links::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
.nav-links {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.nav-links::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
🤖 Prompt for AI Agents 
themes/esphome-theme/assets/css/main.css around lines 1317-1318: the CSS hides
scrollbars for Firefox and IE but not for WebKit browsers; add a rule targeting
WebKit scrollbars (the ::-webkit-scrollbar pseudo-element) immediately after the
existing rules to hide the scrollbar for Chrome/Safari/Edge (e.g., set the
scrollbar pseudo-element to not display or zero width/height), keeping it scoped
consistently with the surrounding selector.

}

.nav-links.active {
display: flex;
opacity: 100%;
z-index: 1000;
height: fit-content;
max-height: 100vh;
transition: height 0.3s ease, opacity 0.3s ease;
}

.dropdown {
position: relative;
margin-right: 0;
margin-bottom: 1em;
width: 100%;
Expand Down
12 changes: 7 additions & 5 deletions themes/esphome-theme/assets/js/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@

const bodystyle = window.getComputedStyle(document.body);
const mobileWidthStop = parseInt(bodystyle.getPropertyValue('--mobile-width-stop'));
const isMobile = (window.innerWidth <= mobileWidthStop);
function isMobileScreen() {
return (window.innerWidth <= mobileWidthStop);
}

function closeMenu() {
const hamburger = document.querySelector('.hamburger-button');
Expand All @@ -20,7 +22,7 @@ function openMenu() {
}
function openTOC() {
const tocToggle = document.getElementById('toc-toggle');
if (!isMobile || !tocToggle) return;
if (!isMobileScreen() || !tocToggle) return;
const tocPanel = document.getElementsByClassName('sidebar-mobile')[0];
const overlay = document.getElementById('overlay');
tocToggle.classList.add('open');
Expand All @@ -30,7 +32,7 @@ function openTOC() {

function closeTOC() {
const tocToggle = document.getElementById('toc-toggle');
if (!isMobile || !tocToggle) return;
if (!isMobileScreen() || !tocToggle) return;
const tocPanel = document.getElementsByClassName('sidebar-mobile')[0];
const overlay = document.getElementById('overlay');
tocToggle.classList.remove('open');
Expand Down Expand Up @@ -85,7 +87,7 @@ document.addEventListener('DOMContentLoaded', function() {
sidebar.addEventListener("click", closeTOC);
})

const dropdownButtons = document.querySelectorAll('.dropbtn button');
const dropdownButtons = document.querySelectorAll('.dropdown button');

dropdownButtons.forEach(button => {
// Handle Enter and Space key presses
Expand All @@ -98,7 +100,7 @@ document.addEventListener('DOMContentLoaded', function() {

// Handle click events
button.addEventListener('click', function(e) {
if (!isMobile) return;
if (!isMobileScreen()) return;
e.preventDefault();
// Close others
dropdownButtons.forEach(function(otherBtn) {
Expand Down