/* One-row header, ported from the service-page landing page.
*
* The mirror ships Divi's two-row header: a dark utility strip (phone, the
* "Residential and Commercial Projects" label, social icons) sitting above the
* main bar (logo left, menu right). The landing page collapses that into a
* single row — logo left, menu centred, orange phone pill and social icons
* right — and this is the same treatment against the same Divi markup.
*
* Nothing is re-parented. The utility strip is lifted out of flow and laid over
* the main header instead, so every `#top-header ...` rule Divi and the child
* theme already apply to the phone and the icons keeps working.
*
* Loaded last, so it wins over Divi without !important except where Divi's own
* rules are already !important.
*/
/* The overlay below is positioned against this wrapper, so it has to be the
containing block. #page-container will not do: it wraps the whole document,
and height:100% against it covers the page. */
.sos-navwrap {
position: relative;
}
/* ---- strip out what the one-row bar has no room for --------------------- */
/* The label is injected into .et-social-icons by the site's own jQuery. It was
the left half of the old strip; on one row there is nowhere for it to go. */
/* !important: the site's own mobile CSS forces this back to display:block at
601px and under. */
.sos-navwrap #top-header .sec-title {
display: none !important;
}
/* The divider separated the old "Residential and Commercial Projects" label
from the icons. With the label gone, nth-child(3) lands mid-row. */
.sos-navwrap #top-header .et-social-icons li:nth-child(3) {
border-left: 0 !important;
padding-left: 0 !important;
}
/* Divi's duplicate icon set, shown in the strip's right half. */
.sos-navwrap #top-header #et-secondary-menu {
display: none;
}
/* ---- menu centred in the bar instead of right-aligned ----
Divi right-floats #et-top-navigation. Dropping the float and centring with
flex puts the links mid-bar; the logo is position:absolute so it stays pinned
left underneath. z-index lifts the links above the absolute .logo_container,
which spans the full width and would otherwise swallow the clicks. Desktop
only — under 980px this box holds the hamburger, which stays hard right. */
/* 1101, not 981: below this the logo, seven menu items and the phone pill stop
fitting one line, and Divi's stock two-row header is better than a cramped
single row. The phone keeps its pill styling either way. */
@media all and (min-width: 1101px) {
/* left/right padding is set inline by nav.js from the measured logo and
phone-cluster widths */
.sos-navwrap #main-header #et-top-navigation {
float: none;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
margin-right: 0;
}
.sos-navwrap #main-header #top-menu-nav {
float: none;
}
.sos-navwrap #main-header #top-menu {
float: none;
display: flex;
align-items: flex-start;
}
.sos-navwrap #main-header .logo_container {
pointer-events: none;
}
/* The logo was not clickable as a home link at 1101 and up. Two causes, and
both had to be fixed:
The fix is z-index alone. Two display changes were tried first and both
broke something measurable: `display:block` made the anchor fill the
absolutely-positioned full-width container (1600x236) and blocked all seven
menu links, and `inline-block` changed the image's containing block so Divi
stopped sizing it and it rendered at its natural 729x236. Leaving the
anchor inline keeps the layout untouched; `position:relative` is enough to
make z-index apply, and the image paints and hit-tests inside its parent's
stacking context.
z-index:3, because #et-top-navigation above is deliberately raised to 2 so
the centred menu clears this container. That also parked the nav on top of
the logo. Lifting the link past it keeps both intentions: the container is
transparent to clicks, the menu is above the container, the logo link is
above the menu but only as wide as the logo. */
.sos-navwrap #main-header .logo_container a {
pointer-events: auto;
position: relative;
z-index: 3;
}
/* ---- phone + socials drop down onto the menu row ----
Unlike the landing page, the mirror's #main-header is position:fixed, so
neither header row is in flow and the wrapper measures 0 tall — an overlay
sized height:100% against it collapses. The overlay is therefore fixed to
the viewport like the header it covers, and takes its height from
--sos-navh, which nav.js publishes from the header's measured height.
Divi also offsets #main-header downward by the utility strip's height when
the secondary nav is enabled. With the strip overlaid, that offset is just
a white gap above the bar. */
.sos-navwrap #main-header {
top: 0 !important;
}
#page-container {
padding-top: var(--sos-navh, 82px) !important;
}
.sos-navwrap #top-header {
position: fixed !important;
height: var(--sos-navh, 82px);
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none;
padding: 0;
pointer-events: none;
display: flex;
align-items: center;
z-index: 100001; /* must clear #main-header, which Divi ships at 99999 */
}
/* The strip's dark background is set with !important by the child theme, at
rest and again on .et-fixed-header. Both of those outrank a plain
.sos-navwrap #top-header, and an opaque overlay paints over the logo and
the menu it is supposed to sit beside. */
.et_fixed_nav #page-container .sos-navwrap #top-header,
.et_fixed_nav #page-container .sos-navwrap #top-header.et-fixed-header {
background-color: transparent !important;
}
/* Same width and gutters as #main-header .container under .et_fullwidth_nav,
so the phone lines up with the right-hand edge of the menu row rather than
floating some arbitrary distance inside it. */
.sos-navwrap #top-header .container {
width: 100%;
max-width: none;
margin: 0;
padding: 0 32px 0 30px;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* padding:0 — Divi gives #et-info a 0.75em bottom padding (13.5px at the
strip's 18px font size) which pads the flex line and rides the phone button
above centre */
.sos-navwrap #top-header #et-info {
float: none;
width: auto;
display: flex;
align-items: center;
pointer-events: auto;
padding: 0;
line-height: 1;
}
.sos-navwrap #top-header #et-info:after {
display: none;
}
/* phone first, icons to its right */
.sos-navwrap #top-header #et-info-phone {
float: none;
margin-left: 0;
order: 1;
white-space: nowrap;
}
/* margin shorthand, not just margin-left: Divi's .et-social-icons{margin:0 0 5px}
keeps a bottom margin that skews the flex line and rides the cluster upward */
.sos-navwrap #top-header .et-social-icons {
float: none !important;
display: flex;
align-items: center;
order: 2;
margin: 0 0 0 26px;
}
.sos-navwrap #top-header .et-social-icons li {
display: flex;
align-items: center;
line-height: 0;
padding: 0;
margin: 0 0 0 14px;
}
.sos-navwrap #top-header .et-social-icons li:first-child {
margin-left: 0;
}
.sos-navwrap #top-header .et-social-icons li a {
display: flex;
align-items: center;
}
.sos-navwrap #top-header .et-social-icons li img {
width: 20px;
height: 20px;
margin: 0;
}
/* menu labels must never wrap — a wrapped "OUR PROCESS" doubles the header
height */
.sos-navwrap #main-header #top-menu > li > a {
white-space: nowrap;
}
/* logo + links + phone + icons all have to fit one row; Divi's 22px
inter-link padding overruns it, 14 gives real clearance */
.sos-navwrap #main-header #top-menu > li {
padding-right: 14px;
}
.sos-navwrap #main-header #top-menu > li:last-child {
padding-right: 0;
}
}
/* ---- phone rendered as the site's orange CTA button ----
Padding and background go on the , not the #et-info-phone span, so the
whole pill is the tap target rather than just the text. Applies at every
width — the mobile bar gets the button too. */
.sos-navwrap #top-header #et-info {
text-align: center;
}
.sos-navwrap #et-info-phone {
background: none;
padding: 0;
display: inline-flex;
align-items: center;
font-size: 16px;
}
.sos-navwrap #et-info-phone:before {
display: none;
}
.sos-navwrap #et-info-phone a {
/* !important on display: Divi's mobile rules block-level the phone link,
which stretches the pill into a full-width slab across the top of the
small-screen bar. */
display: inline-flex !important;
align-items: center;
gap: 9px;
background: #dd5c26;
color: #fff !important;
border-radius: 6px;
padding: 11px 20px;
line-height: 1;
font-weight: 700;
font-size: 16px;
letter-spacing: 0;
transition: background 0.15s ease, transform 0.12s ease;
}
.sos-navwrap #et-info-phone a:hover {
background: #b8481b;
color: #fff !important;
transform: translateY(-1px);
}
.sos-navwrap #et-info-phone a:before {
content: "";
width: 17px;
height: 17px;
flex: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.1 21 3 13.9 3 5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* ---- scrolled state: recolour only, never resize ----
Divi shrinks the bar on scroll (nav padding-top 33->20, link padding-bottom
35->20), which drops the header height and squeezes the phone button against
the top edge. Pin both to their resting values so the size never changes.
Same specificity as Divi's rules, so these win on source order — keep last. */
@media all and (min-width: 981px) {
.sos-navwrap .et-fixed-header#main-header #et-top-navigation {
padding-top: 33px;
}
.sos-navwrap .et-fixed-header#main-header #et-top-navigation nav > ul > li > a {
padding-bottom: 35px;
}
/* Divi turns the sticky bar white and recolours the links to match. The rest
of this header is dark, and the social icons are white PNGs that cannot be
recoloured, so a white bar makes both the links and the icons disappear.
Pin the scrolled bar to the resting colour instead and keep everything on
it white — the bar then never changes appearance on scroll, only position.
!important and an id-heavy selector on the background: Divi sets it with
.et-fixed-header#main-header, and the dropdown panels inherit the same
switch. */
.sos-navwrap .et-fixed-header#main-header,
.sos-navwrap .et-fixed-header#main-header .container {
background-color: #262626 !important;
}
.sos-navwrap .et-fixed-header#main-header {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
}
.sos-navwrap .et-fixed-header #top-menu > li > a,
.sos-navwrap .et-fixed-header #top-menu > li > a:hover,
.sos-navwrap .et-fixed-header #et-top-navigation .et-cart-info,
.sos-navwrap .et-fixed-header #et_search_icon:before {
color: #fff !important;
}
/* the dropdown panels are white with dark text at rest, and Divi does not
change them on scroll — left alone so both states match */
.sos-navwrap .et-fixed-header #top-menu li.current-menu-ancestor > a,
.sos-navwrap .et-fixed-header #top-menu li.current-menu-item > a,
.sos-navwrap .et-fixed-header #top-menu li.current_page_item > a {
color: #f26b2b !important;
}
}
/* Below 1300px the icons stop fitting. The phone is the CTA that matters; they
come back above 1300px, and the site hides them on mobile regardless. */
@media all and (min-width: 1101px) and (max-width: 1300px) {
.sos-navwrap #top-header .et-social-icons {
display: none;
}
/* The mirror's menu carries one item more than the landing page's, and below
1300 it no longer fits the gap between the logo and the phone. Centring
overflows a flex line in both directions, so a menu that is too wide runs
back over the logo however much padding is reserved. Align it to the end of
the gap instead — it can only ever crowd the phone, which the reserved
right padding already keeps clear — and tighten the type to buy room. */
.sos-navwrap #main-header #et-top-navigation {
justify-content: flex-end;
}
/* 6 and 13, not 9 and 14: the Service Area item took the menu back to seven
entries, and at 1101 the extra ~115px pushed its left edge back over the
logo - measured at 29px of overlap. The plugin's own
wp-content/plugins/wj-xbrowser/dist/styles.css already drops to 13px below
1288, so this is the size the narrow band was built for anyway. */
.sos-navwrap #main-header #top-menu > li {
padding-right: 6px;
}
.sos-navwrap #main-header #top-menu > li > a {
font-size: 13px;
}
/* Divi sizes the logo off the header height; capping it here returns ~60px to
the menu, which is the difference between fitting and not at 1024. */
.sos-navwrap #main-header #logo {
max-width: 190px;
}
}
/* =========================================================================
SMALL SCREENS (<=980px) — one sticky bar instead of three static ones
=========================================================================
What the mirror ships on a phone, top to bottom:
a.top_phone fixed, 40px orange phone number (wj-xbrowser plugin)
#top-header in flow, 42px dark strip, social icons only
#main-header in flow, 90px logo + hamburger
table.mobile_info fixed, 42px orange HOURS/MAP bar pinned to the bottom
167px of header that scrolls away the moment you move, plus a second orange
bar permanently across the bottom of the screen. The phone number — the only
thing on the page that earns money — is the one part that stays put, and the
menu is gone as soon as you start reading.
This block collapses that to two fixed rows: the orange phone bar and the
logo/hamburger bar under it. The social strip is deleted outright and nav.js
moves its icons into the hamburger drawer; the HOURS/MAP bar is deleted with
nothing to replace it (its two buttons opened popovers duplicating the
footer's hours block and a Google Maps link). Reserved height drops from 167
to ~130 and every pixel of it now follows the reader down the page — the
sticky header is shorter than the static one it replaces.
Everything here is scoped to .sos-navwrap or to an id, so it outranks Divi
without !important except where Divi and the plugin are already !important.
Loaded last, so equal-specificity rules win on source order. */
@media all and (max-width: 980px) {
/* ---- the plugin's HOURS/MAP bar, and the two popovers it opened -------
wj-xbrowser ships .mobile_info as position:fixed;bottom:0 with
z-index:99999999, so it sat over the last row of the hero form and over
the final CTA button. .mobile_box holds the hours popover and
.mobile_box_map the map one; with the buttons gone nothing can open them.
Hidden rather than deleted from the markup — the block is inline in the
footer of all 228 pages, and a stylesheet rule reverses in one line. */
table.mobile_info,
.mobile_box,
.mobile_box_map {
display: none !important;
}
/* The plugin padded the footer 55px at the bottom purely to clear that bar.
!important: it sets the shorthand that way too. */
#footer-bottom {
padding: 15px 0 !important;
}
/* ---- the white hairline under the phone number ----
wj-xbrowser gives .top_phone `border-bottom: 3px solid #fff`. It made sense
when the orange bar sat against the page: it was the edge of the bar. Now
the dark header butts straight up underneath it and the rule reads as a
stray white line across the top of the screen.
`a.top_phone` rather than `.top_phone` — the plugin's rule is one class and
this has to outrank it. nav.css also loads after the plugin's stylesheet,
so source order backs it up. */
a.top_phone {
border-bottom: 0;
}
/* ---- the dark social strip ----
nav.js lifts .et-social-icons out of here and into the hamburger drawer,
which is where a phone user goes looking for them anyway. The strip has
nothing else in it on a phone — the plugin hides #et-info-phone at this
width and Divi hides #et-secondary-menu — so the whole row goes. */
.sos-navwrap #top-header {
display: none !important;
}
/* ---- the header follows the page down -------------------------------
Divi explicitly un-sticks the header on small screens
(.et_fixed_nav #main-header{position:absolute} at <=980), which is why it
scrolls away today. Same specificity as that rule, so this wins on source
order; !important anyway because the child theme also sets position on
#main-header from the customizer.
top is the measured height of .top_phone rather than the plugin's
hard-coded 35px margin: the two disagree by 5px today (the orange bar is
40px tall, the margin clears 35), which is what puts the hairline of
orange under the dark bar. nav.js publishes the real number. */
.sos-navwrap #main-header {
position: fixed !important;
/* !important on top as well: Divi ships `.et_fixed_nav_temp #main-header
{top:0!important}` at this width and its own scripts put that class on
, which parked the bar underneath the orange one. */
top: var(--sos-mphoneh, 40px) !important;
left: 0;
right: 0;
width: 100%;
z-index: 99999; /* under .top_phone's 999999, over the page */
}
/* Nothing above the hero is in flow any more, so the page has to reserve the
height itself. --sos-mnavh is the phone bar plus the header's RESTING
height, so the reserve never moves when the bar shrinks on scroll.
!important: Divi sets this from three different body-class combinations,
all of them more specific than a bare #page-container. */
#page-container {
padding-top: var(--sos-mnavh, 130px) !important;
}
/* ---- shrink once you are past the top ----
130px of a ~740px phone viewport is a lot to hold permanently. nav.js puts
.sos-stuck on past 40px of scroll and the bar gives back 24 of them;
the logo follows on its own, being max-height:54% of the bar.
Only the padding animates. Divi kills transitions on #main-header, #logo
and .container at this width (a deliberate choice — the logo jitters
otherwise), so the height change has to be driven from the inside. */
.sos-navwrap #main-header #et-top-navigation,
.sos-navwrap #main-header .mobile_menu_bar {
transition: padding 0.18s ease;
}
html.sos-stuck .sos-navwrap #main-header #et-top-navigation {
padding-top: 12px;
}
html.sos-stuck .sos-navwrap #main-header .mobile_menu_bar {
padding-bottom: 12px;
}
/* nav.js sets this for the one frame it spends measuring the resting height
with .sos-stuck lifted, so the toggle never animates into view. */
html.sos-measuring .sos-navwrap #main-header #et-top-navigation,
html.sos-measuring .sos-navwrap #main-header .mobile_menu_bar {
transition: none !important;
}
/* ---- the drawer ----
It hangs off a fixed bar now, so a menu taller than the screen has no
scroll of its own and the bottom items become unreachable. Seven items
plus an expanded Services submenu plus the social row is already past a
small phone. svh over vh so the mobile browser chrome is counted. */
.sos-navwrap #et_mobile_nav_menu ul.et_mobile_menu {
max-height: calc(100vh - var(--sos-mnavh, 130px) - 12px);
max-height: calc(100svh - var(--sos-mnavh, 130px) - 12px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ---- the social icons, in their new home at the foot of the drawer ----
.et_mobile_menu li a is a full-width block with a bottom rule, which turns
four 24px icons into four full-width rows. The row is flex instead, and
the label the site's jQuery prepends to every .et-social-icons goes: it
was the left half of the old desktop strip and reads as a stray sentence
under the menu.
Every selector here carries #main-header, and not for scoping: Divi ships
`#main-header .et_mobile_menu li ul{display:block!important}` to force
nested submenus open in the drawer, and an icon list is a `ul` inside an
`li` inside .et_mobile_menu like any other. Three classes lose to one id,
so without the id the icons stack one per line however many !importants
they carry. */
.sos-navwrap #main-header li.sos-mobile-social {
display: block;
padding: 16px 5% 6px;
}
.sos-navwrap #main-header li.sos-mobile-social .sec-title {
display: none !important;
}
.sos-navwrap #main-header li.sos-mobile-social .et-social-icons {
display: flex !important;
justify-content: center;
align-items: center;
gap: 30px;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sos-navwrap #main-header li.sos-mobile-social .et-social-icons li {
display: flex;
align-items: center;
margin: 0 !important;
padding: 0 !important;
border: 0;
line-height: 0;
}
/* The one icon the crawl captured in the markup is Divi's own
Youtube, which draws its glyph from a
social-icon stylesheet the mirror does not carry - it renders as an empty
anchor. Invisible either way, but in a flex row it still eats a 30px gap
and pushes the four real icons off centre. The four that show are the ones
the site's jQuery injects as ![]()
, and they include YouTube already. */
.sos-navwrap #main-header li.sos-mobile-social .et-social-icons li.et-social-icon {
display: none;
}
.sos-navwrap #main-header li.sos-mobile-social .et-social-icons li a {
display: flex;
align-items: center;
padding: 0 !important;
border-bottom: 0 !important;
background: none !important;
color: #fff !important;
}
.sos-navwrap #main-header li.sos-mobile-social .et-social-icons li img {
width: 26px;
height: 26px;
margin: 0;
}
}