fix: expand sidebar visibility to all non-desktop screens (≤992px)

- sidebar.css: change .floating-menu-btn breakpoint from max-width:768px
  to max-width:992px so the button appears on tablets as well
- header.css: move .nav-container hide + .floating-menu-btn show into
  the ≤992px block so desktop nav is hidden and sidebar activates on
  all mobile + tablet viewports (Bootstrap lg breakpoint)
- ≥993px (desktop): header nav visible, sidebar hidden
- ≤992px (tablet + mobile): header nav hidden, sidebar floating button shown"
This commit is contained in:
hiep200311
2026-06-05 21:06:08 +07:00
parent 9c07af001c
commit b999d51232
2 changed files with 15 additions and 14 deletions
+14 -13
View File
@@ -299,6 +299,20 @@
.banner-container {
height: 350px;
}
/* Hide desktop nav, show sidebar button on tablet */
.nav-container {
display: none;
}
.header-contact-section {
display: none;
}
/* Show floating menu button on tablet */
.floating-menu-btn {
display: flex;
}
}
@media (max-width: 768px) {
@@ -311,10 +325,6 @@
margin: 0 10px;
}
.nav-container {
display: none; /* Hide desktop nav on mobile */
}
.mobile-menu-btn {
display: block;
}
@@ -329,10 +339,6 @@
flex-grow: 1;
}
.header-contact-section {
display: none; /* Hide contact info on mobile - it will be in sidebar */
}
.logo {
width: 60px;
}
@@ -349,11 +355,6 @@
.banner-container {
height: 300px;
}
/* Show floating menu button on mobile */
.floating-menu-btn {
display: flex;
}
}
@media (max-width: 576px) {