`). With the override in place, the bar was pulled OUT
of fixed/pinned positioning and rendered in normal document flow
instead — wherever it naturally fell after whatever precedes it —
which is exactly what produces a gap of page background above it.
`.fixed-top` means "pinned to the very top of the viewport"; this
now makes that explicit and guaranteed rather than hoping
Bootstrap's own rule wins the cascade unassisted.
CENTERING FIX (round 2): flex + align-items:center didn't hold up
on mobile — something inside the bar wasn't resolving cleanly on
narrow screens. Switched to absolute positioning: top:50% +
translateY(-50%) finds the exact vertical centre of WHATEVER
height the bar actually ends up at, unconditionally. It no longer
depends on flex alignment, sibling heights, or matching min-height
to the real render. */
#survey-nav, .navbar.fixed-top {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
z-index: 1030;
min-height: 81.6px; /* 75.6px logo + 3px top + 3px bottom */
background: var(--dc-green) !important;
border-bottom: 2px solid var(--dc-green-darker) !important;
}
/* Fixed positioning takes the bar out of the document's normal flow,
so the page content needs an equivalent top offset or the fixed
bar will sit ON TOP of (hide) the first ~82px of the page instead
of pushing it down — this is Bootstrap's own documented pattern
for any fixed-top navbar. */
body {
padding-top: 92px !important;
margin: 0 !important;
}
#survey-nav::before, .navbar.fixed-top::before {
content: "";
position: absolute !important;
top: 50% !important;
left: 14px !important;
transform: translateY(-50%) !important;
margin: 0 !important;
width: 75.6px; /* 84px reduced 10% */
height: 75.6px; /* 84px reduced 10% */
background-image: url('https://services.dilamphiscare.com/wp-content/uploads/2024/06/new-logo-Circular-white-bark-e1720031011884.png');
background-size: cover;
background-position: center;
border-radius: 50%;
border: 2.5px solid var(--dc-orange);
}
/* The logo is now positioned independently of the bar's own content
(it's taken clean out of flow), so its old content needs its own
left space reserved instead of relying on flex order to push it
right of the logo. 75.6px logo + 14px offset + a little breathing
room. */
#survey-nav > div, .navbar.fixed-top > div {
padding-left: 104px !important;
}
/* ---------- Index / flyout menu — identical in light & dark ----------
The question-index / language-switcher / save-load dropdown/drawer
that opens from the nav bar. Written as an explicit light-mode rule
PLUS an unscoped fallback, rather than relying on one unscoped rule
alone — in testing, the unscoped version alone was losing to
something in light mode specifically (dark mode happened to be
reinforced by the separate #survey-nav-green dark rule, which is
why only light mode showed the bug). Also covers Bootstrap's
.offcanvas pattern defensively, in case the panel that opens is an
offcanvas drawer rather than a plain .dropdown-menu — both get
identical styling either way, so it's safe to cover both. */
#survey-nav .dropdown-menu, .navbar.fixed-top .dropdown-menu,
#navbar-menu .dropdown-menu, #main-dropdown,
#survey-nav .offcanvas, .navbar.fixed-top .offcanvas,
body:not(.dc-dark) #survey-nav .dropdown-menu,
body:not(.dc-dark) .navbar.fixed-top .dropdown-menu,
body:not(.dc-dark) #navbar-menu .dropdown-menu,
body:not(.dc-dark) #main-dropdown,
body:not(.dc-dark) #survey-nav .offcanvas,
body:not(.dc-dark) .navbar.fixed-top .offcanvas {
background-color: var(--dc-green) !important;
border: none !important;
outline: none !important;
border-radius: var(--dc-radius-sm);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
padding: 6px 0;
position: absolute !important;
max-height: min(70vh, 480px) !important;
overflow-y: auto !important;
}
/* Every descendant (the
wrapper especially) loses its own background/border/margin first —
Bootstrap's .list-group-item ships a default WHITE background and
a 1px border, which is exactly the "thick border / white patch"
effect around each item. Zeroing everything out here, THEN the
.dropdown-item rule right after re-asserts its own green (it wins
the tie because it's more specific AND comes later), so only the
actual link row shows colour, cleanly, with nothing peeking through. */
#survey-nav .dropdown-menu *, .navbar.fixed-top .dropdown-menu *,
#survey-nav .offcanvas *, .navbar.fixed-top .offcanvas * {
color: #FFFFFF !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
}
#survey-nav .dropdown-item, .navbar.fixed-top .dropdown-item,
#survey-nav .offcanvas-header, #survey-nav .offcanvas-body,
.navbar.fixed-top .offcanvas-header, .navbar.fixed-top .offcanvas-body,
body:not(.dc-dark) #survey-nav .dropdown-item,
body:not(.dc-dark) .navbar.fixed-top .dropdown-item,
body:not(.dc-dark) #survey-nav .offcanvas-header,
body:not(.dc-dark) #survey-nav .offcanvas-body,
body:not(.dc-dark) .navbar.fixed-top .offcanvas-header,
body:not(.dc-dark) .navbar.fixed-top .offcanvas-body {
background-color: var(--dc-green) !important;
color: #FFFFFF !important;
font-family: var(--dc-font-body);
padding: 8px 18px;
margin: 0 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
#survey-nav .dropdown-item:hover, #survey-nav .dropdown-item:focus,
.navbar.fixed-top .dropdown-item:hover, .navbar.fixed-top .dropdown-item:focus,
body:not(.dc-dark) #survey-nav .dropdown-item:hover,
body:not(.dc-dark) #survey-nav .dropdown-item:focus,
body:not(.dc-dark) .navbar.fixed-top .dropdown-item:hover,
body:not(.dc-dark) .navbar.fixed-top .dropdown-item:focus {
background-color: var(--dc-orange) !important;
color: #FFFFFF !important;
border-radius: 10px !important;
}
/* Unanswered-section indicator — a small orange left accent so
incomplete sections stand out at a glance in a long intake form.
Doesn't fight the catch-all above: two classes beats one. */
#survey-nav .dropdown-item.index-warning,
.navbar.fixed-top .dropdown-item.index-warning {
border-left: 4px solid var(--dc-orange) !important;
padding-left: 14px !important;
}
/* Current section — Bootstrap's .disabled normally fades it with
reduced opacity; restored to full strength plus a white "you are
here" accent so the current position is clear, not muted. */
#survey-nav .dropdown-item.disabled,
.navbar.fixed-top .dropdown-item.disabled {
opacity: 1 !important;
font-weight: 700 !important;
border-left: 4px solid #FFFFFF !important;
padding-left: 14px !important;
cursor: default !important;
}
/* Scrollbar — track matches the menu's own green (blends in rather
than standing out), thumb is the brand orange (a visible, on-brand
drag handle) — applies the same in light and dark since the menu
itself doesn't change colour between modes. */
#main-dropdown::-webkit-scrollbar {
width: 10px;
}
#main-dropdown::-webkit-scrollbar-track {
background-color: var(--dc-green) !important;
}
#main-dropdown::-webkit-scrollbar-thumb {
background-color: var(--dc-orange) !important;
border-radius: 6px;
}
#main-dropdown {
scrollbar-color: var(--dc-orange) var(--dc-green);
}
/* ---------- Nav toggle icon (the "···" trigger, top-right) ----------
Exact markup now confirmed:
The grey was the button itself matching the generic "other button"
dark-mode rule (any plain