forked from MinhQuan/PresentCorpo
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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user