1800nasi/bqkc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hamburger menu and mobile changes

Browse Source
This commit is contained in:
Nasir Anthony Montalvo
2026-01-31 01:01:09 -06:00
parent 10ed7f20b9
commit eb21658b37
4 changed files with 473 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
_sass/_custom.scss
View File

@@ -1076,6 +1076,110 @@ blockquote {
NAVIGATION
============================================================================ */
/* Hamburger menu button */
.navbar-toggler {
background-color: transparent !important;
border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
border-radius: var(--border-radius);
padding: var(--space-sm) 0.65rem;
transition: all var(--transition-normal);
}
.navbar-toggler:hover,
.navbar-toggler:focus {
border-color: rgba(255, 255, 255, 0.75) !important;
box-shadow: none !important;
outline: none !important;
}
.navbar-toggler:focus {
box-shadow: none;
}
/* Hamburger menu button */
.navbar-toggler {
background-color: transparent !important;
border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
border-radius: var(--border-radius);
padding: var(--space-sm) 0.65rem;
transition: all var(--transition-normal);
}
.navbar-toggler:hover,
.navbar-toggler:focus {
border-color: rgba(255, 255, 255, 0.75) !important;
box-shadow: none !important;
outline: none !important;
}
.navbar-toggler:focus {
box-shadow: none;
}
/* Hamburger icon - custom 3 lines */
.navbar-toggler-icon {
background-image: none !important;
width: 20px;
height: 14px;
position: relative;
display: inline-block;
background-color: transparent !important;
}
/* Top line */
.navbar-toggler-icon::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.85);
transition: background-color var(--transition-normal);
}
/* Bottom line */
.navbar-toggler-icon::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.85);
transition: background-color var(--transition-normal);
}
/* Middle line - using a span */
.navbar-toggler-icon {
background: linear-gradient(
to bottom,
transparent 0%,
transparent 45%,
rgba(255, 255, 255, 0.85) 45%,
rgba(255, 255, 255, 0.85) 55%,
transparent 55%,
transparent 100%
) !important;
}
.navbar-toggler:hover .navbar-toggler-icon::before,
.navbar-toggler:hover .navbar-toggler-icon::after {
background-color: #ffffff;
}
.navbar-toggler:hover .navbar-toggler-icon {
background: linear-gradient(
to bottom,
transparent 0%,
transparent 45%,
#ffffff 45%,
#ffffff 55%,
transparent 55%,
transparent 100%
) !important;
}
.dropdown-header.nav-section-label {
font-size: var(--text-xs);
text-transform: uppercase;