01 — HEADER & NAVIGATION CODE
VERIFIED CURRENT MASTER ✓WHAT THIS CONTROLS
Live location: Theme Script → Main Menu One Line Fix
Captured: 22 September 2026
Master size: 2,830 lines / 82,958 bytes
Purpose: Object-based desktop navigation + mobile header.
DEPENDENCIES / DO NOT CHANGE BLINDLY
MORE: navigation behaviour has historically been generated/handled through the Theme Script rather than being an ordinary independent content page.
MORE submenu: Contact Us and Media Centre.
Mobile warning: parent menu items such as MORE, GET INVOLVED and BLOG have previously behaved differently on mobile when their parent link is #. Test desktop and mobile before replacing this master.
Rollback rule: never overwrite this verified master. Any future alteration becomes HEADER-NAV V02, V03, etc.
VIEW / COPY COMPLETE VERIFIED MASTER CODE
<style>
/* ==========================================================
SUSSEX HOMELESS SUPPORT
MASTER HEADER
OBJECT-BASED DESKTOP NAVIGATION
========================================================== */
/* ==========================================================
GLOBAL FONT
========================================================== */
body,
body p,
body li,
body a,
body span,
body label,
body input,
body textarea,
body select,
body option,
body button,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.post-password-form,
.post-password-form p,
.post-password-form label,
.entry-content,
.entry-content p,
.fw-page-builder-content,
.fw-page-builder-content p {
font-family: Arial, Helvetica, sans-serif !important;
}
/* ==========================================================
GENERATED SEPARATORS
HIDDEN UNLESS DESKTOP
========================================================== */
.shs-menu-separator {
display: none !important;
}
/* ==========================================================
DESKTOP
========================================================== */
@media only screen and (min-width: 992px) {
/* ======================================================
MASTER ARTBOARD
50% OF SCREEN
CENTRED
BASED ON WIDTH OF MAIN IMAGE BELOW
====================================================== */
.fw-header-main .fw-container {
width: 50% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
}
/* ======================================================
LOGO
FIRST OBJECT
EXTRA WIDTH ADDED TO RIGHT
TO GIVE HOME MORE BREATHING ROOM
====================================================== */
.fw-header-main .fw-wrap-logo {
position: relative !important;
top: 10px !important;
flex: 0 0 250px !important;
width: 250px !important;
max-width: 250px !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
overflow: visible !important;
}
.fw-header-main .fw-site-logo {
display: block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.fw-header-main .fw-site-logo img {
display: block !important;
width: auto !important;
height: 105px !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ======================================================
THEMEFUSE NAV WRAPPER
USE ALL REMAINING WIDTH
AFTER LOGO
====================================================== */
.fw-header-main .fw-nav-wrap {
position: relative !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
overflow: visible !important;
}
/* ======================================================
NAVIGATION
====================================================== */
.fw-header-main .fw-site-navigation {
position: relative !important;
top: 26px !important;
left: auto !important;
right: auto !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
overflow: visible !important;
}
/* ======================================================
MENU ARTBOARD
DISTRIBUTE ALL OBJECTS ACROSS X
====================================================== */
.fw-site-navigation > ul {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
overflow: visible !important;
list-style: none !important;
}
/* ======================================================
ALL MENU ITEMS = OBJECTS
====================================================== */
.fw-site-navigation > ul > li {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
}
.fw-site-navigation > ul > li > a {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 18px !important;
line-height: 1.08 !important;
white-space: nowrap !important;
text-align: center !important;
}
/* ======================================================
REMOVE OLD THEME / PREVIOUS SEPARATORS
====================================================== */
#menu-item-1630::after,
#menu-item-1148::after,
#menu-item-2108::after,
#menu-item-1194::after,
#menu-item-1939::after,
#menu-item-1957::after,
#menu-item-1000::after {
content: none !important;
display: none !important;
}
/* ======================================================
HOME
====================================================== */
#menu-item-1630 {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ======================================================
GET INVOLVED
TWO DECKS
====================================================== */
#menu-item-1148 {
flex: 0 0 100px !important;
width: 100px !important;
margin: 0 !important;
padding: 0 !important;
}
#menu-item-1148 > a {
display: block !important;
width: 100px !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.05 !important;
}
/* ======================================================
SHOP / AUCTION FRAME
====================================================== */
.fw-site-navigation > ul > #menu-item-2108 {
position: relative !important;
display: block !important;
flex: 0 0 130px !important;
width: 130px !important;
height: 90px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* ======================================================
FRAME ARTWORK
====================================================== */
.fw-site-navigation > ul > #menu-item-2108 > a {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform:
translate(-50%, -50%)
translateY(-16px) !important;
display: block !important;
width: 130px !important;
height: 90px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background-color: transparent !important;
background-image:
url("https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/FrameV1.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
border: 0 !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
white-space: normal !important;
overflow: hidden !important;
z-index: 20 !important;
filter:
drop-shadow(0 5px 4px rgba(0,0,0,.18))
drop-shadow(0 9px 9px rgba(0,0,0,.16)) !important;
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
filter .4s ease !important;
}
/* ======================================================
FRAME HOVER
====================================================== */
.fw-site-navigation > ul > #menu-item-2108 > a:hover {
transform:
translate(-50%, -50%)
translateY(-21px)
scale(1.14) !important;
background-color: transparent !important;
filter:
brightness(1.08)
saturate(1.08)
drop-shadow(0 8px 5px rgba(0,0,0,.20))
drop-shadow(0 13px 11px rgba(0,0,0,.18))
drop-shadow(0 0 10px rgba(244,116,33,.45))
drop-shadow(0 0 15px rgba(212,168,70,.40)) !important;
color: transparent !important;
z-index: 50 !important;
}
/* ======================================================
FRAME LIGHT SWEEP
====================================================== */
.fw-site-navigation > ul > #menu-item-2108 > a::before {
content: "" !important;
position: absolute !important;
top: -30% !important;
left: -65% !important;
width: 30% !important;
height: 160% !important;
z-index: 3 !important;
pointer-events: none !important;
background:
linear-gradient(
110deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.08) 30%,
rgba(255,255,255,.72) 50%,
rgba(255,255,255,.08) 70%,
rgba(255,255,255,0) 100%
) !important;
transform: skewX(-18deg) !important;
transition: left .65s ease !important;
}
.fw-site-navigation > ul > #menu-item-2108 > a:hover::before {
left: 135% !important;
}
.fw-site-navigation > ul > #menu-item-2108 > a::after {
content: none !important;
display: none !important;
}
/* ======================================================
BLOG
====================================================== */
#menu-item-1194 {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ======================================================
OUR SPONSORS
TWO DECKS
====================================================== */
#menu-item-1939 {
flex: 0 0 105px !important;
width: 105px !important;
margin: 0 !important;
padding: 0 !important;
}
#menu-item-1939 > a {
display: block !important;
width: 105px !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.05 !important;
}
/* ======================================================
CONTACT US
====================================================== */
#menu-item-1957 {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ======================================================
DONATE
FINAL OBJECT
====================================================== */
#menu-item-1000 {
flex: 0 0 76px !important;
width: 76px !important;
height: 76px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
background: #f47421 !important;
overflow: hidden !important;
}
#menu-item-1000 > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 76px !important;
height: 76px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
border-radius: 50% !important;
background: #f47421 !important;
color: #ffffff !important;
font-size: 17px !important;
line-height: 1 !important;
text-align: center !important;
}
#menu-item-1000 > a:hover {
background: #171717 !important;
color: #ffffff !important;
}
/* ======================================================
REAL ORANGE SEPARATOR OBJECTS
HOME | GET INVOLVED
BLOG | OUR SPONSORS | CONTACT US
NO LINES AROUND FRAME
NO LINE BEFORE DONATE
====================================================== */
.fw-site-navigation > ul > .shs-menu-separator {
display: block !important;
flex: 0 0 3px !important;
width: 3px !important;
height: 48px !important;
margin: 0 !important;
padding: 0 !important;
background: #f47421 !important;
pointer-events: none !important;
list-style: none !important;
}
/* ======================================================
DROPDOWN MENUS
CENTRED UNDER PARENT + STABLE HOVER
====================================================== */
.fw-site-navigation > ul > li.menu-item-has-children {
position: relative !important;
overflow: visible !important;
}
.fw-site-navigation > ul > li.menu-item-has-children::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 100% !important;
transform: translateX(-50%) !important;
width: 100% !important;
min-width: 190px !important;
height: 18px !important;
background: transparent !important;
pointer-events: auto !important;
}
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: 100% !important;
transform: translateX(-50%) !important;
width: max-content !important;
min-width: 190px !important;
max-width: 320px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
text-align: center !important;
z-index: 9999 !important;
overflow: visible !important;
}
.fw-site-navigation > ul > li > ul > li,
.fw-site-navigation > ul > li > .sub-menu > li {
display: block !important;
position: relative !important;
float: none !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
text-align: center !important;
}
.fw-site-navigation > ul > li > ul > li > a,
.fw-site-navigation > ul > li > .sub-menu > li > a {
display: block !important;
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
white-space: nowrap !important;
text-align: center !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover > ul,
.fw-site-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > ul,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu {
left: 50% !important;
transform: translateX(-50%) !important;
}
/* ======================================================
SHS REFINED DESKTOP MENU
Smaller type / breathing room / orange bold hover
====================================================== */
.fw-site-navigation > ul > li > a {
font-size: 16px !important;
font-weight: 400 !important;
color: #171717 !important;
letter-spacing: .1px !important;
transition:
color .22s ease,
font-weight .22s ease !important;
}
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000) > a:hover,
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000):hover > a,
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000):focus-within > a {
color: #f47421 !important;
font-weight: 700 !important;
}
/* ======================================================
SUBMENU TRIGGER
Small orange dot + fine line
====================================================== */
.fw-site-navigation > ul > li.menu-item-has-children::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: -19px !important;
width: 9px !important;
height: 9px !important;
margin-left: -4.5px !important;
border-radius: 50% !important;
background: #f47421 !important;
opacity: 0 !important;
transform: translateY(-5px) scale(.55) !important;
transition:
opacity .18s ease,
transform .25s cubic-bezier(.2,.8,.2,1) !important;
pointer-events: none !important;
z-index: 10002 !important;
}
.fw-site-navigation > ul > li.menu-item-has-children::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: -10px !important;
width: 1px !important;
min-width: 1px !important;
height: 24px !important;
background: #f47421 !important;
transform: translateX(-50%) scaleY(0) !important;
transform-origin: top center !important;
opacity: 0 !important;
transition:
transform .25s .06s ease,
opacity .18s .06s ease !important;
pointer-events: none !important;
z-index: 10001 !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover::before,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::before {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover::after,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::after {
opacity: 1 !important;
transform: translateX(-50%) scaleY(1) !important;
}
/* ======================================================
ANIMATED GLASS SUBMENU
75% WHITE / ORANGE OUTLINE / ROUNDED
====================================================== */
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
top: calc(100% + 13px) !important;
min-width: 220px !important;
max-width: 310px !important;
padding: 14px 18px !important;
background: rgba(255,255,255,.75) !important;
border: 1.5px solid #f47421 !important;
border-radius: 22px !important;
box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
-webkit-backdrop-filter: blur(10px) saturate(115%) !important;
backdrop-filter: blur(10px) saturate(115%) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateX(-50%) translateY(-12px) scaleY(.88) !important;
transform-origin: top center !important;
transition:
opacity .24s ease,
transform .34s cubic-bezier(.2,.8,.2,1),
visibility 0s linear .34s !important;
pointer-events: none !important;
overflow: hidden !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover > ul,
.fw-site-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > ul,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu {
left: 50% !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) scaleY(1) !important;
transition:
opacity .22s .05s ease,
transform .34s cubic-bezier(.2,.8,.2,1),
visibility 0s !important;
pointer-events: auto !important;
}
/* ======================================================
SUBMENU ITEMS
Fine dotted orange separators
====================================================== */
.fw-site-navigation > ul > li > ul > li,
.fw-site-navigation > ul > li > .sub-menu > li {
position: relative !important;
background: transparent !important;
border: 0 !important;
}
.fw-site-navigation > ul > li > ul > li:not(:last-child)::after,
.fw-site-navigation > ul > li > .sub-menu > li:not(:last-child)::after {
content: "" !important;
display: block !important;
height: 1px !important;
margin: 0 2px !important;
background-image:
repeating-linear-gradient(
to right,
rgba(244,116,33,.18) 0,
rgba(244,116,33,.18) 3px,
rgba(244,116,33,.78) 3px,
rgba(244,116,33,.78) 7px,
rgba(244,116,33,.18) 7px,
rgba(244,116,33,.18) 10px
) !important;
}
.fw-site-navigation > ul > li > ul > li > a,
.fw-site-navigation > ul > li > .sub-menu > li > a {
padding: 12px 10px !important;
background: transparent !important;
color: #171717 !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
text-align: center !important;
border: 0 !important;
border-radius: 0 !important;
transition:
color .2s ease,
font-weight .2s ease,
transform .2s ease !important;
}
.fw-site-navigation > ul > li > ul > li > a:hover,
.fw-site-navigation > ul > li > .sub-menu > li > a:hover,
.fw-site-navigation > ul > li > ul > li.current-menu-item > a,
.fw-site-navigation > ul > li > .sub-menu > li.current-menu-item > a {
background: transparent !important;
color: #f47421 !important;
font-weight: 700 !important;
transform: scale(1.025) !important;
}
}
/* ==========================================================
FORM FONTS
========================================================== */
input,
textarea,
select,
button {
font-family: Arial, Helvetica, sans-serif !important;
}
/* ==========================================================
BUTTON FONTS
========================================================== */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.fw-btn {
font-family: Arial, Helvetica, sans-serif !important;
}
/* ==========================================================
PASSWORD PAGE
========================================================== */
.post-password-form,
.post-password-form p,
.post-password-form label,
.post-password-form input {
font-family: Arial, Helvetica, sans-serif !important;
}
/* ==========================================================
MOBILE HEADER
UNCHANGED
========================================================== */
@media only screen and (max-width: 767px) {
.fw-header-main .fw-container {
position: relative !important;
width: 100% !important;
height: 110px !important;
min-height: 110px !important;
padding: 0 25px !important;
box-sizing: border-box !important;
}
/* LOGO LEFT */
.fw-header-main .fw-wrap-logo {
position: absolute !important;
left: 25px !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
z-index: 10 !important;
}
.fw-header-main .fw-site-logo {
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.fw-header-main .fw-site-logo img {
display: block !important;
width: auto !important;
height: 70px !important;
max-width: 220px !important;
max-height: 70px !important;
margin: 0 !important;
padding: 0 !important;
}
/* BURGER RIGHT */
.fw-header-main .mmenu-link {
display: block !important;
position: absolute !important;
left: auto !important;
right: 25px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 200 !important;
}
}
/* ==========================================================
DESKTOP STICKY HEADER
TRANSPARENT AT TOP / WHITE WHEN SCROLLING
MOBILE UNCHANGED
========================================================== */
@media only screen and (min-width: 992px) {
.fw-header-main {
transition:
background-color .22s ease,
box-shadow .22s ease !important;
}
.fw-header-main.shs-header-scrolled {
background-color: #ffffff !important;
background-image: none !important;
box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
}
.fw-header-main.shs-header-scrolled .fw-container,
.fw-header-main.shs-header-scrolled .fw-nav-wrap,
.fw-header-main.shs-header-scrolled .fw-site-navigation {
background-color: transparent !important;
background-image: none !important;
}
}
/* ==========================================================
SHS MENU V3 — GRACEFUL REVEAL REFINEMENT
Desktop only
========================================================== */
@media only screen and (min-width: 992px) {
/* MAIN MENU: NO ORANGE BLOCKS — TEXT ONLY */
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000) > a,
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000) > a:hover,
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000):hover > a,
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000):focus-within > a {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000):hover > a,
.fw-site-navigation > ul > li:not(#menu-item-2108):not(#menu-item-1000):focus-within > a {
color: #f47421 !important;
font-weight: 700 !important;
}
/* HOVER BRIDGE: keeps submenu reachable while pointer travels downward */
.fw-site-navigation > ul > li.menu-item-has-children {
padding-bottom: 24px !important;
margin-bottom: -24px !important;
}
/* DOT */
.fw-site-navigation > ul > li.menu-item-has-children::before {
top: -18px !important;
width: 8px !important;
height: 8px !important;
margin-left: -4px !important;
opacity: 0 !important;
transform: translateY(-5px) scale(.55) !important;
transition:
opacity .32s ease,
transform .42s cubic-bezier(.22,.61,.36,1) !important;
}
/* CONNECTING LINE */
.fw-site-navigation > ul > li.menu-item-has-children::after {
top: -9px !important;
width: 1px !important;
min-width: 1px !important;
height: 31px !important;
background: #f47421 !important;
opacity: 0 !important;
transform: translateX(-50%) scaleY(0) !important;
transform-origin: top center !important;
transition:
transform .48s .12s cubic-bezier(.22,.61,.36,1),
opacity .28s .10s ease !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover::before,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::before {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover::after,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::after {
opacity: 1 !important;
transform: translateX(-50%) scaleY(1) !important;
}
/* SMALLER, LIGHTER PANEL */
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
top: calc(100% + 8px) !important;
min-width: 185px !important;
width: max-content !important;
max-width: 250px !important;
padding: 9px 14px !important;
background: rgba(255,255,255,.75) !important;
border: 1px solid #f47421 !important;
border-radius: 16px !important;
box-shadow: 0 8px 20px rgba(0,0,0,.09) !important;
-webkit-backdrop-filter: blur(9px) saturate(110%) !important;
backdrop-filter: blur(9px) saturate(110%) !important;
/* CLOSED: compressed at the top */
opacity: 0 !important;
visibility: hidden !important;
clip-path: inset(0 0 100% 0 round 16px) !important;
transform: translateX(-50%) translateY(-5px) !important;
transform-origin: top center !important;
pointer-events: none !important;
transition:
clip-path .62s cubic-bezier(.22,.61,.36,1),
opacity .34s ease,
transform .62s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .72s !important;
}
/* OPEN: top-to-bottom reveal */
.fw-site-navigation > ul > li.menu-item-has-children:hover > ul,
.fw-site-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > ul,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
clip-path: inset(0 0 0 0 round 16px) !important;
transform: translateX(-50%) translateY(0) !important;
pointer-events: auto !important;
transition:
clip-path .62s .10s cubic-bezier(.22,.61,.36,1),
opacity .38s .08s ease,
transform .62s .10s cubic-bezier(.22,.61,.36,1),
visibility 0s !important;
}
/* GRACEFUL HANG: submenu remains visible briefly after pointer leaves */
.fw-site-navigation > ul > li.menu-item-has-children.shs-submenu-hold > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-submenu-hold > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
clip-path: inset(0 0 0 0 round 16px) !important;
transform: translateX(-50%) translateY(0) !important;
pointer-events: auto !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-submenu-hold::before {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-submenu-hold::after {
opacity: 1 !important;
transform: translateX(-50%) scaleY(1) !important;
}
/* COMPACT SUBMENU TYPE + SPACING */
.fw-site-navigation > ul > li > ul > li > a,
.fw-site-navigation > ul > li > .sub-menu > li > a {
padding: 9px 8px !important;
font-size: 13px !important;
line-height: 1.18 !important;
font-weight: 400 !important;
background: transparent !important;
color: #171717 !important;
}
.fw-site-navigation > ul > li > ul > li > a:hover,
.fw-site-navigation > ul > li > .sub-menu > li > a:hover {
background: transparent !important;
color: #f47421 !important;
font-weight: 700 !important;
transform: none !important;
}
/* FINER DOTTED SEPARATORS */
.fw-site-navigation > ul > li > ul > li:not(:last-child)::after,
.fw-site-navigation > ul > li > .sub-menu > li:not(:last-child)::after {
opacity: .62 !important;
transform: scaleX(.92) !important;
}
}
/* ==========================================================
SHS MENU V4 — FIXED WHITE SCROLLING HEADER
Desktop only. Mobile untouched.
========================================================== */
@media only screen and (min-width: 992px) {
body.shs-page-scrolled header,
body.shs-page-scrolled #header,
body.shs-page-scrolled .fw-header,
body.shs-page-scrolled .fw-header-main {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
}
body.shs-page-scrolled .fw-header-main .fw-container,
body.shs-page-scrolled .fw-header-main .fw-container-fluid {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.shs-page-scrolled .fw-header-main .fw-nav-wrap,
body.shs-page-scrolled .fw-header-main .fw-site-navigation {
background-color: transparent !important;
background-image: none !important;
}
}
/* ==========================================================
SHS MENU V5 — ELEGANT WIPE + GENEROUS HIT AREA
Desktop only
========================================================== */
@media only screen and (min-width: 992px) {
/* Parent item remains the visual anchor. */
.fw-site-navigation > ul > li.menu-item-has-children {
overflow: visible !important;
}
/* Invisible interaction corridor around title, connector and dropdown.
It gives a relaxed pointer path without changing the visible design. */
.fw-site-navigation > ul > li.menu-item-has-children .shs-menu-hit-area {
position: absolute !important;
left: 50% !important;
top: -34px !important;
width: calc(100% + 100px) !important;
min-width: 270px !important;
height: 430px !important;
transform: translateX(-50%) !important;
background: transparent !important;
border: 0 !important;
pointer-events: none !important;
z-index: 9996 !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open .shs-menu-hit-area,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing .shs-menu-hit-area {
pointer-events: auto !important;
}
/* Keep actual title above the invisible hit area. */
.fw-site-navigation > ul > li.menu-item-has-children > a {
position: relative !important;
z-index: 10005 !important;
}
/* Parent title — elegant text-only hover/open state. */
.fw-site-navigation > ul > li.menu-item-has-children:hover > a,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > a,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > a,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing > a {
background: transparent !important;
color: #f47421 !important;
font-weight: 700 !important;
}
/* Dot sits below the parent title. */
.fw-site-navigation > ul > li.menu-item-has-children::before {
top: calc(100% + 10px) !important;
width: 8px !important;
height: 8px !important;
margin-left: -4px !important;
opacity: 0 !important;
transform: scale(.35) !important;
transition:
opacity .38s ease,
transform .48s cubic-bezier(.22,.61,.36,1) !important;
z-index: 10004 !important;
}
/* Fine line grows down toward the panel. */
.fw-site-navigation > ul > li.menu-item-has-children::after {
top: calc(100% + 18px) !important;
width: 1px !important;
min-width: 1px !important;
height: 28px !important;
background: #f47421 !important;
opacity: 0 !important;
transform: translateX(-50%) scaleY(0) !important;
transform-origin: top center !important;
transition:
transform .55s .16s cubic-bezier(.22,.61,.36,1),
opacity .35s .12s ease !important;
z-index: 10003 !important;
pointer-events: none !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open::before,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing::before,
.fw-site-navigation > ul > li.menu-item-has-children:hover::before,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::before {
opacity: 1 !important;
transform: scale(1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open::after,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing::after,
.fw-site-navigation > ul > li.menu-item-has-children:hover::after,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::after {
opacity: 1 !important;
transform: translateX(-50%) scaleY(1) !important;
}
/* Panel is always at final dimensions; clip-path alone performs the wipe. */
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
top: calc(100% + 46px) !important;
min-width: 205px !important;
width: max-content !important;
max-width: 270px !important;
padding: 10px 15px !important;
background: rgba(255,255,255,.75) !important;
border: 1px solid #f47421 !important;
border-radius: 16px !important;
box-shadow: 0 8px 22px rgba(0,0,0,.08) !important;
-webkit-backdrop-filter: blur(9px) saturate(108%) !important;
backdrop-filter: blur(9px) saturate(108%) !important;
opacity: 1 !important;
visibility: hidden !important;
clip-path: inset(0 0 100% 0 round 16px) !important;
transform: translateX(-50%) !important;
transform-origin: top center !important;
pointer-events: none !important;
z-index: 10002 !important;
transition:
clip-path .82s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .86s !important;
}
/* True top-to-bottom wipe reveal. */
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children:hover > ul,
.fw-site-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > ul,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu {
visibility: visible !important;
clip-path: inset(0 0 0 0 round 16px) !important;
transform: translateX(-50%) !important;
pointer-events: auto !important;
transition:
clip-path .82s .18s cubic-bezier(.22,.61,.36,1),
visibility 0s !important;
}
/* During graceful close, reverse wipe upward. */
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing > .sub-menu {
visibility: visible !important;
clip-path: inset(0 0 100% 0 round 16px) !important;
transform: translateX(-50%) !important;
pointer-events: none !important;
transition:
clip-path .72s cubic-bezier(.4,0,.2,1),
visibility 0s linear .76s !important;
}
/* Relaxed reading spacing. */
.fw-site-navigation > ul > li > ul > li > a,
.fw-site-navigation > ul > li > .sub-menu > li > a {
padding: 10px 9px !important;
font-size: 13px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
background: transparent !important;
color: #171717 !important;
transition:
color .24s ease,
font-weight .24s ease !important;
}
.fw-site-navigation > ul > li > ul > li > a:hover,
.fw-site-navigation > ul > li > .sub-menu > li > a:hover {
color: #f47421 !important;
font-weight: 700 !important;
background: transparent !important;
transform: none !important;
}
}
/* ==========================================================
SHS MENU V6 — UNIFIED SUBMENU WIPE
Dot + line + panel behave as one reveal.
Panel width expands to longest submenu label.
Desktop only.
========================================================== */
@media only screen and (min-width: 992px) {
/* Let every submenu determine its width from its longest label. */
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
width: max-content !important;
min-width: 220px !important;
max-width: none !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.fw-site-navigation > ul > li > ul > li,
.fw-site-navigation > ul > li > .sub-menu > li,
.fw-site-navigation > ul > li > ul > li > a,
.fw-site-navigation > ul > li > .sub-menu > li > a {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: nowrap !important;
}
/* CLOSED STATE — dot, line and panel are all hidden by the same
top-to-bottom visual sequence. */
.fw-site-navigation > ul > li.menu-item-has-children::before {
opacity: 0 !important;
transform: scale(.2) !important;
transition:
opacity .20s ease,
transform .28s cubic-bezier(.22,.61,.36,1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children::after {
opacity: 0 !important;
transform: translateX(-50%) scaleY(0) !important;
transform-origin: top center !important;
transition:
transform .36s cubic-bezier(.22,.61,.36,1),
opacity .20s ease !important;
}
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
opacity: 1 !important;
visibility: hidden !important;
clip-path: inset(0 0 100% 0 round 16px) !important;
transform: translateX(-50%) !important;
transform-origin: top center !important;
pointer-events: none !important;
transition:
clip-path .78s cubic-bezier(.22,.61,.36,1),
visibility 0s linear 1.15s !important;
}
/* OPEN — one graceful downward sequence:
dot -> line -> panel wipe -> contents become available. */
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open::before {
opacity: 1 !important;
transform: scale(1) !important;
transition:
opacity .24s ease,
transform .34s cubic-bezier(.22,.61,.36,1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open::after {
opacity: 1 !important;
transform: translateX(-50%) scaleY(1) !important;
transition:
transform .42s .18s cubic-bezier(.22,.61,.36,1),
opacity .24s .14s ease !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > .sub-menu {
visibility: visible !important;
clip-path: inset(0 0 0 0 round 16px) !important;
pointer-events: auto !important;
transition:
clip-path .82s .48s cubic-bezier(.22,.61,.36,1),
visibility 0s !important;
}
/* Contents softly arrive as the panel wipe completes. */
.fw-site-navigation > ul > li > ul > li,
.fw-site-navigation > ul > li > .sub-menu > li {
opacity: 0 !important;
transform: translateY(-4px) !important;
transition:
opacity .30s ease,
transform .36s cubic-bezier(.22,.61,.36,1) !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > ul > li,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > .sub-menu > li {
opacity: 1 !important;
transform: translateY(0) !important;
transition:
opacity .38s .86s ease,
transform .42s .84s cubic-bezier(.22,.61,.36,1) !important;
}
/* CLICKED — contents disappear first, then panel/line/dot wipe upward. */
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > ul > li,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > .sub-menu > li {
opacity: 0 !important;
transform: translateY(-4px) !important;
transition:
opacity .18s ease,
transform .22s ease !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > .sub-menu {
visibility: visible !important;
clip-path: inset(0 0 100% 0 round 16px) !important;
pointer-events: none !important;
transition:
clip-path .64s .10s cubic-bezier(.4,0,.2,1),
visibility 0s linear .78s !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected::after {
opacity: 0 !important;
transform: translateX(-50%) scaleY(0) !important;
transform-origin: top center !important;
transition:
transform .34s .52s cubic-bezier(.4,0,.2,1),
opacity .20s .56s ease !important;
}
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected::before {
opacity: 0 !important;
transform: scale(.2) !important;
transition:
opacity .22s .76s ease,
transform .28s .72s ease !important;
}
/* During a deliberate selection, keep parent orange until navigation. */
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > a {
color: #f47421 !important;
font-weight: 700 !important;
background: transparent !important;
}
}
/* ==========================================================
SHS MENU V7 — SIMPLE / STABLE DROPDOWNS
No submenu animation.
Visible dot + connector line.
8px submenu corners.
Desktop only.
========================================================== */
@media only screen and (min-width: 992px) {
.fw-site-navigation > ul > li.menu-item-has-children::before {
top: calc(100% + 8px) !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.fw-site-navigation > ul > li.menu-item-has-children::after {
top: calc(100% + 16px) !important;
width: 1px !important;
min-width: 1px !important;
height: 30px !important;
background: #f47421 !important;
opacity: 1 !important;
transform: translateX(-50%) !important;
transition: none !important;
z-index: 10004 !important;
}
/* Hide dot/line until the parent submenu is actually active. */
.fw-site-navigation > ul > li.menu-item-has-children:not(:hover):not(:focus-within):not(.shs-menu-open)::before,
.fw-site-navigation > ul > li.menu-item-has-children:not(:hover):not(:focus-within):not(.shs-menu-open)::after {
opacity: 0 !important;
}
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
top: calc(100% + 46px) !important;
border-radius: 8px !important;
clip-path: none !important;
transform: translateX(-50%) !important;
transition: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover > ul,
.fw-site-navigation > ul > li.menu-item-has-children:hover > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > ul,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
clip-path: none !important;
transform: translateX(-50%) !important;
transition: none !important;
}
.fw-site-navigation > ul > li > ul > li,
.fw-site-navigation > ul > li > .sub-menu > li {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Disable V6 selected/closing animation states. */
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-selected > .sub-menu,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing > ul,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-closing > .sub-menu {
transition: none !important;
}
}
/* ==========================================================
SHS MENU V8 — SUBMENU-ONLY HIT AREA + MORE MENU
Desktop only. Mobile untouched.
========================================================== */
@media only screen and (min-width: 992px) {
/* V8 no longer uses the large V5 hit area around the parent menu item. */
.fw-site-navigation > ul > li.menu-item-has-children > .shs-menu-hit-area {
display: none !important;
pointer-events: none !important;
}
/* The submenu itself gets a modest invisible safety margin.
This is the only expanded hit area. */
.fw-site-navigation > ul > li.menu-item-has-children > ul::before,
.fw-site-navigation > ul > li.menu-item-has-children > .sub-menu::before {
content: "" !important;
position: absolute !important;
left: -18px !important;
right: -18px !important;
top: -18px !important;
bottom: -18px !important;
background: transparent !important;
pointer-events: auto !important;
z-index: -1 !important;
}
/* MORE uses exactly the same visual treatment as every other submenu. */
.fw-site-navigation > ul > li.shs-more-menu > a {
background: transparent !important;
}
}
/* ==========================================================
SHS MENU V9 — SUBMENU BRIDGE / HIT AREA + VISIBLE LINE
Desktop only. Mobile untouched.
========================================================== */
@media only screen and (min-width: 992px) {
/* Create a real invisible bridge from the parent item down to the submenu.
This prevents the menu closing while the pointer crosses the gap. */
.fw-site-navigation > ul > li.menu-item-has-children {
position: relative !important;
}
.fw-site-navigation > ul > li.menu-item-has-children > .shs-submenu-bridge {
position: absolute !important;
left: 50% !important;
top: 100% !important;
width: 100% !important;
min-width: 120px !important;
height: 52px !important;
transform: translateX(-50%) !important;
background: transparent !important;
pointer-events: none !important;
z-index: 10001 !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover > .shs-submenu-bridge,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within > .shs-submenu-bridge,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open > .shs-submenu-bridge {
pointer-events: auto !important;
}
/* Dot */
.fw-site-navigation > ul > li.menu-item-has-children::before {
top: calc(100% + 8px) !important;
left: 50% !important;
width: 8px !important;
height: 8px !important;
margin-left: -4px !important;
background: #f47421 !important;
border-radius: 50% !important;
opacity: 0 !important;
transform: none !important;
transition: none !important;
z-index: 10006 !important;
pointer-events: none !important;
}
/* Clearly visible connector from dot to submenu top edge. */
.fw-site-navigation > ul > li.menu-item-has-children::after {
top: calc(100% + 16px) !important;
left: 50% !important;
width: 1px !important;
min-width: 1px !important;
height: 30px !important;
background: #f47421 !important;
opacity: 0 !important;
transform: translateX(-50%) !important;
transition: none !important;
z-index: 10005 !important;
pointer-events: none !important;
}
.fw-site-navigation > ul > li.menu-item-has-children:hover::before,
.fw-site-navigation > ul > li.menu-item-has-children:hover::after,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::before,
.fw-site-navigation > ul > li.menu-item-has-children:focus-within::after,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open::before,
.fw-site-navigation > ul > li.menu-item-has-children.shs-menu-open::after {
opacity: 1 !important;
}
/* Submenu begins exactly where the connector finishes. */
.fw-site-navigation > ul > li > ul,
.fw-site-navigation > ul > li > .sub-menu {
top: calc(100% + 46px) !important;
z-index: 10004 !important;
}
/* Slight safety margin around the submenu itself. */
.fw-site-navigation > ul > li > ul::before,
.fw-site-navigation > ul > li > .sub-menu::before {
content: "" !important;
position: absolute !important;
left: -14px !important;
right: -14px !important;
top: -10px !important;
bottom: -14px !important;
background: transparent !important;
pointer-events: auto !important;
z-index: -1 !important;
}
}
/* ==========================================================
SHS MENU V10 — STICKY WHITE HEADER WHILE SCROLLING
Desktop only. Mobile untouched.
========================================================== */
@media only screen and (min-width: 992px) {
/* Keep the complete header/menu on screen while scrolling. */
header,
#header,
.fw-header,
.fw-header-main {
position: sticky !important;
top: 0 !important;
z-index: 99990 !important;
}
/* At the top, retain the existing transparent/background treatment. */
body:not(.shs-v10-scrolled) header,
body:not(.shs-v10-scrolled) #header,
body:not(.shs-v10-scrolled) .fw-header,
body:not(.shs-v10-scrolled) .fw-header-main {
box-shadow: none !important;
}
/* Once scrolling starts, the entire sticky header becomes solid white. */
body.shs-v10-scrolled header,
body.shs-v10-scrolled #header,
body.shs-v10-scrolled .fw-header,
body.shs-v10-scrolled .fw-header-main,
body.shs-v10-scrolled .fw-header-main .fw-container,
body.shs-v10-scrolled .fw-header-main .fw-container-fluid {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.shs-v10-scrolled header,
body.shs-v10-scrolled #header,
body.shs-v10-scrolled .fw-header,
body.shs-v10-scrolled .fw-header-main {
box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
}
body.shs-v10-scrolled .fw-header-main .fw-nav-wrap,
body.shs-v10-scrolled .fw-header-main .fw-site-navigation {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* ==========================================================
SHS MENU V11 — FIXED OVERLAY HEADER / NO WHITE GAP
Desktop only. Mobile untouched.
The menu stays in one fixed screen position.
Page content scrolls underneath it.
No sticky header space is reserved in the document flow.
========================================================== */
@media only screen and (min-width: 992px) {
/* Remove V10 sticky behaviour from all outer wrappers. */
header,
#header,
.fw-header {
position: static !important;
top: auto !important;
background: transparent !important;
box-shadow: none !important;
}
/* The actual menu/header bar becomes the fixed overlay. */
.fw-header-main {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
width: 100% !important;
z-index: 99990 !important;
margin: 0 !important;
}
/* Logged-in WordPress admin bar sits above the fixed menu. */
body.admin-bar .fw-header-main {
top: 32px !important;
}
/* Do not reserve a large blank header area above the page. */
header,
#header,
.fw-header {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* At the very top retain the existing transparent artwork treatment. */
body:not(.shs-v11-scrolled) .fw-header-main {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* While scrolling, menu stays fixed and becomes solid white.
The page continues underneath it. */
body.shs-v11-scrolled .fw-header-main,
body.shs-v11-scrolled .fw-header-main .fw-container,
body.shs-v11-scrolled .fw-header-main .fw-container-fluid {
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
}
body.shs-v11-scrolled .fw-header-main {
box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
}
body.shs-v11-scrolled .fw-header-main .fw-nav-wrap,
body.shs-v11-scrolled .fw-header-main .fw-site-navigation {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* ==========================================================
SHS MENU V12 — CONTENT CLEARANCE BELOW FIXED HEADER
Desktop only. Mobile untouched.
Keeps the fixed menu exactly where it is.
Pushes page content down by:
full menu/header height + approximately half a menu height.
========================================================== */
@media only screen and (min-width: 992px) {
body {
--shs-fixed-header-height: 0px;
--shs-header-breathing-space: 0px;
}
body.shs-v12-header-ready {
padding-top: 22mm !important;
}
/* V11 deliberately collapsed these wrappers.
Keep them collapsed so no second/duplicate header gap is created. */
header,
#header,
.fw-header {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* ==========================================================
SHS V20 — BLOG CARD TEXT OVERLAY FIX
Desktop blog/archive pages only.
Keeps the approved 22mm navigation gap.
========================================================== */
@media only screen and (min-width: 992px) {
/* Restore normal document flow inside blog/post cards.
The old theme can retain fixed/negative title spacing after its
masonry calculations, causing titles and excerpts to sit on top
of one another. */
body.blog article h1,
body.blog article h2,
body.blog article h3,
body.blog .post h1,
body.blog .post h2,
body.blog .post h3,
body.archive article h1,
body.archive article h2,
body.archive article h3 {
position: static !important;
height: auto !important;
min-height: 0 !important;
margin-top: 6px !important;
margin-bottom: 8px !important;
line-height: 1.08 !important;
transform: none !important;
}
body.blog article p,
body.blog .post p,
body.archive article p {
position: static !important;
height: auto !important;
min-height: 0 !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
line-height: 1.45 !important;
transform: none !important;
}
body.blog article .entry-content,
body.blog .post .entry-content,
body.archive article .entry-content {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
}
/* ==========================================================
SHS V21 — ACTUAL THEME BLOG CARD FLOW FIX
Targets ThemeFuse .postlist-col cards seen in the live DOM.
========================================================== */
@media only screen and (min-width: 992px) {
/* Keep Masonry positioning on the cards themselves, but restore
ordinary vertical flow INSIDE each individual card. */
body.blog .postlist-col > *,
body.archive .postlist-col > * {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
}
body.blog .postlist-col .fw-heading,
body.blog .postlist-col .fw-special-title,
body.blog .postlist-col h1,
body.blog .postlist-col h2,
body.blog .postlist-col h3,
body.blog .postlist-col h4,
body.archive .postlist-col .fw-heading,
body.archive .postlist-col .fw-special-title,
body.archive .postlist-col h1,
body.archive .postlist-col h2,
body.archive .postlist-col h3,
body.archive .postlist-col h4 {
position: static !important;
float: none !important;
clear: both !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 5px 0 8px 0 !important;
padding: 0 !important;
line-height: 1.12 !important;
transform: none !important;
}
body.blog .postlist-col p,
body.blog .postlist-col .entry-content,
body.blog .postlist-col .post-content,
body.blog .postlist-col .post-excerpt,
body.archive .postlist-col p,
body.archive .postlist-col .entry-content,
body.archive .postlist-col .post-content,
body.archive .postlist-col .post-excerpt {
position: static !important;
float: none !important;
clear: both !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin-top: 0 !important;
line-height: 1.45 !important;
transform: none !important;
}
body.blog .postlist-col,
body.archive .postlist-col {
height: auto;
overflow: visible !important;
}
}
</style>
<script>
/* ==========================================================
CREATE THREE REAL SEPARATOR OBJECTS
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
var menu =
document.querySelector(".fw-site-navigation > ul");
if (!menu) {
return;
}
/* REMOVE EXISTING GENERATED SEPARATORS */
var oldSeparators =
menu.querySelectorAll(".shs-menu-separator");
oldSeparators.forEach(function (separator) {
separator.remove();
});
/* CREATE A SEPARATOR */
function addSeparatorAfter(menuItemId) {
var item =
document.getElementById(menuItemId);
if (!item || item.parentNode !== menu) {
return;
}
var separator =
document.createElement("li");
separator.className =
"shs-menu-separator";
separator.setAttribute(
"aria-hidden",
"true"
);
item.insertAdjacentElement(
"afterend",
separator
);
}
/* HOME | GET INVOLVED */
addSeparatorAfter("menu-item-1630");
/* BLOG | OUR SPONSORS */
addSeparatorAfter("menu-item-1194");
/* OUR SPONSORS | CONTACT US */
addSeparatorAfter("menu-item-1939");
});
/* ==========================================================
DESKTOP HEADER BACKGROUND ON SCROLL
========================================================== */
(function () {
var header = document.querySelector(".fw-header-main");
if (!header) {
return;
}
function updateHeaderBackground() {
if (window.innerWidth >= 992 && window.pageYOffset > 20) {
header.classList.add("shs-header-scrolled");
} else {
header.classList.remove("shs-header-scrolled");
}
}
updateHeaderBackground();
window.addEventListener("scroll", updateHeaderBackground, { passive: true });
window.addEventListener("resize", updateHeaderBackground);
})();
/* ==========================================================
SHS SUBMENU V3 — HOVER HOLD
Gives the visitor time to move into and choose submenu items.
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 992) {
return;
}
var parents =
document.querySelectorAll(
".fw-site-navigation > ul > li.menu-item-has-children"
);
parents.forEach(function (item) {
var closeTimer = null;
item.addEventListener("mouseenter", function () {
if (closeTimer) {
clearTimeout(closeTimer);
closeTimer = null;
}
item.classList.add("shs-submenu-hold");
});
item.addEventListener("mouseleave", function () {
closeTimer = setTimeout(function () {
item.classList.remove("shs-submenu-hold");
closeTimer = null;
}, 1100);
});
});
});
/* ==========================================================
SHS MENU V4 — ROBUST DESKTOP SCROLL STATE
========================================================== */
(function () {
var ticking = false;
function setScrollState() {
if (window.innerWidth >= 992 && window.scrollY > 20) {
document.body.classList.add("shs-page-scrolled");
} else {
document.body.classList.remove("shs-page-scrolled");
}
ticking = false;
}
function requestScrollState() {
if (!ticking) {
window.requestAnimationFrame(setScrollState);
ticking = true;
}
}
document.addEventListener("DOMContentLoaded", setScrollState);
window.addEventListener("load", setScrollState);
window.addEventListener("scroll", requestScrollState, { passive: true });
window.addEventListener("resize", requestScrollState);
})();
/* ==========================================================
SHS MENU V5 — ELEGANT READING / HIT-AREA BEHAVIOUR
OPEN:
pointer enters parent title
STAY OPEN:
pointer may move through the generous invisible hit area
and over the revealed submenu
CLOSE:
after leaving the whole interaction area, wait 1.8 seconds,
then perform a graceful reverse wipe
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 992) {
return;
}
var parents =
document.querySelectorAll(
".fw-site-navigation > ul > li.menu-item-has-children"
);
parents.forEach(function (item) {
/* Remove older generated V5 hit area if script is ever re-run. */
var oldHit = item.querySelector(":scope > .shs-menu-hit-area");
if (oldHit) {
oldHit.remove();
}
var hitArea = document.createElement("span");
hitArea.className = "shs-menu-hit-area";
hitArea.setAttribute("aria-hidden", "true");
item.appendChild(hitArea);
var closeTimer = null;
var finishTimer = null;
function cancelClose() {
if (closeTimer) {
clearTimeout(closeTimer);
closeTimer = null;
}
if (finishTimer) {
clearTimeout(finishTimer);
finishTimer = null;
}
item.classList.remove("shs-menu-closing");
}
function openMenu() {
cancelClose();
item.classList.add("shs-menu-open");
}
function scheduleClose() {
cancelClose();
/* Long grace period for visitors who are reading / moving slowly. */
closeTimer = setTimeout(function () {
item.classList.remove("shs-menu-open");
item.classList.add("shs-menu-closing");
finishTimer = setTimeout(function () {
item.classList.remove("shs-menu-closing");
finishTimer = null;
}, 800);
closeTimer = null;
}, 1800);
}
item.addEventListener("mouseenter", openMenu);
item.addEventListener("mouseleave", scheduleClose);
hitArea.addEventListener("mouseenter", openMenu);
hitArea.addEventListener("mouseleave", scheduleClose);
var submenu =
item.querySelector(":scope > ul, :scope > .sub-menu");
if (submenu) {
submenu.addEventListener("mouseenter", openMenu);
submenu.addEventListener("mouseleave", scheduleClose);
}
item.addEventListener("focusin", openMenu);
item.addEventListener("focusout", function () {
setTimeout(function () {
if (!item.contains(document.activeElement)) {
scheduleClose();
}
}, 0);
});
});
});
/* ==========================================================
SHS MENU V6 — SELECT, WIPE CLOSED, THEN NAVIGATE
Applies automatically to every desktop submenu.
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 992) {
return;
}
var parents =
document.querySelectorAll(
".fw-site-navigation > ul > li.menu-item-has-children"
);
parents.forEach(function (item) {
var submenu =
item.querySelector(":scope > ul, :scope > .sub-menu");
if (!submenu) {
return;
}
/* Clicking a submenu link no longer navigates immediately.
We remember the destination, perform the elegant reverse wipe,
then load the chosen page. */
submenu.querySelectorAll("a").forEach(function (link) {
link.addEventListener("click", function (event) {
/* Preserve modified clicks / new-tab behaviour. */
if (
event.metaKey ||
event.ctrlKey ||
event.shiftKey ||
event.altKey ||
event.button === 1 ||
link.target === "_blank"
) {
return;
}
var destination = link.href;
if (!destination) {
return;
}
event.preventDefault();
event.stopPropagation();
item.classList.remove(
"shs-menu-open",
"shs-menu-closing",
"shs-submenu-hold"
);
item.classList.add("shs-menu-selected");
/* Matches the complete reverse-wipe sequence above. */
setTimeout(function () {
window.location.href = destination;
}, 1120);
});
});
});
});
/* ==========================================================
SHS MENU V7 — IMMEDIATE SUBMENU NAVIGATION
Removes the V6 click-close animation/delay.
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 992) {
return;
}
document.querySelectorAll(
".fw-site-navigation > ul > li.menu-item-has-children > ul a, " +
".fw-site-navigation > ul > li.menu-item-has-children > .sub-menu a"
).forEach(function (link) {
link.addEventListener("click", function (event) {
if (
event.metaKey ||
event.ctrlKey ||
event.shiftKey ||
event.altKey ||
event.button === 1 ||
link.target === "_blank"
) {
return;
}
event.stopImmediatePropagation();
/* Do not prevent default: browser follows link immediately. */
}, true);
});
});
/* ==========================================================
SHS MENU V8 — BUILD "MORE" MENU
Replaces the existing CONTACT US top-level item visually
with MORE and places CONTACT US + MEDIA CENTRE beneath it.
Existing Contact URL is preserved automatically.
Media Centre:
/press-media/
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
var nav =
document.querySelector(".fw-site-navigation > ul");
if (!nav) {
return;
}
var contactItem = null;
Array.from(nav.children).some(function (li) {
var directLink = li.querySelector(":scope > a");
if (!directLink) {
return false;
}
var label =
directLink.textContent
.replace(/\s+/g, " ")
.trim()
.toUpperCase();
if (label === "CONTACT US") {
contactItem = li;
return true;
}
return false;
});
if (!contactItem) {
return;
}
var contactLink =
contactItem.querySelector(":scope > a");
var contactURL =
contactLink ? contactLink.href : "/contact-us/";
/* Turn the existing Contact item into the MORE parent. */
contactItem.classList.add(
"menu-item-has-children",
"shs-more-menu"
);
if (contactLink) {
contactLink.textContent = "MORE";
contactLink.setAttribute("href", "#");
contactLink.setAttribute("aria-haspopup", "true");
contactLink.setAttribute("aria-expanded", "false");
contactLink.addEventListener("click", function (event) {
event.preventDefault();
});
}
/* Remove any existing direct submenu so V8 is deterministic. */
var existing =
contactItem.querySelector(":scope > ul, :scope > .sub-menu");
if (existing) {
existing.remove();
}
var submenu = document.createElement("ul");
submenu.className = "sub-menu shs-more-submenu";
var contactChild = document.createElement("li");
var contactChildLink = document.createElement("a");
contactChildLink.href = contactURL;
contactChildLink.textContent = "CONTACT US";
contactChild.appendChild(contactChildLink);
var mediaChild = document.createElement("li");
var mediaChildLink = document.createElement("a");
mediaChildLink.href =
"https://www.sussexhomelesssupport.co.uk/press-media/";
mediaChildLink.textContent = "MEDIA CENTRE";
mediaChild.appendChild(mediaChildLink);
submenu.appendChild(contactChild);
submenu.appendChild(mediaChild);
contactItem.appendChild(submenu);
});
/* ==========================================================
SHS MENU V9 — BUILD REAL POINTER BRIDGES
Only submenu parents receive a bridge.
========================================================== */
document.addEventListener("DOMContentLoaded", function () {
if (window.innerWidth < 992) {
return;
}
document.querySelectorAll(
".fw-site-navigation > ul > li.menu-item-has-children"
).forEach(function (item) {
var submenu =
item.querySelector(":scope > ul, :scope > .sub-menu");
if (!submenu) {
return;
}
if (!item.querySelector(":scope > .shs-submenu-bridge")) {
var bridge = document.createElement("span");
bridge.className = "shs-submenu-bridge";
bridge.setAttribute("aria-hidden", "true");
item.appendChild(bridge);
}
});
});
/* ==========================================================
SHS MENU V10 — SCROLL STATE
========================================================== */
(function () {
function updateV10Header() {
if (window.innerWidth >= 992 && window.scrollY > 10) {
document.body.classList.add("shs-v10-scrolled");
} else {
document.body.classList.remove("shs-v10-scrolled");
}
}
document.addEventListener("DOMContentLoaded", updateV10Header);
window.addEventListener("load", updateV10Header);
window.addEventListener("scroll", updateV10Header, { passive: true });
window.addEventListener("resize", updateV10Header);
})();
/* ==========================================================
SHS MENU V11 — FIXED OVERLAY SCROLL STATE
========================================================== */
(function () {
function updateV11Header() {
if (window.innerWidth >= 992 && window.scrollY > 10) {
document.body.classList.add("shs-v11-scrolled");
} else {
document.body.classList.remove("shs-v11-scrolled");
}
}
document.addEventListener("DOMContentLoaded", updateV11Header);
window.addEventListener("load", updateV11Header);
window.addEventListener("scroll", updateV11Header, { passive: true });
window.addEventListener("resize", updateV11Header);
})();
/* ==========================================================
SHS MENU V19 — EXACT 22MM CONTENT GAP BELOW NAVIGATION
========================================================== */
(function () {
function setV12ContentClearance() {
if (window.innerWidth < 992) {
document.body.classList.remove("shs-v12-header-ready");
document.body.style.removeProperty("--shs-fixed-header-height");
document.body.style.removeProperty("--shs-header-breathing-space");
return;
}
var menu =
document.querySelector(".fw-header-main");
if (!menu) {
return;
}
var menuHeight =
Math.ceil(menu.getBoundingClientRect().height);
/* V16 — use the actual SHOP/AUCTION frame icon height
as the exact breathing space between the orange menu line
and the beginning of page content. */
var frameIcon =
document.querySelector("#menu-item-2108 img");
var breathingSpace =
frameIcon
? Math.round(frameIcon.getBoundingClientRect().height * 0.35)
: Math.round(menuHeight * 0.20);
document.body.style.setProperty(
"--shs-fixed-header-height",
menuHeight + "px"
);
document.body.style.setProperty(
"--shs-header-breathing-space",
breathingSpace + "px"
);
document.body.classList.add(
"shs-v12-header-ready"
);
}
document.addEventListener(
"DOMContentLoaded",
setV12ContentClearance
);
window.addEventListener(
"load",
setV12ContentClearance
);
window.addEventListener(
"resize",
setV12ContentClearance
);
})();
/* ==========================================================
SHS V20 — BLOG LAYOUT REFRESH
========================================================== */
(function () {
function refreshBlogLayout() {
if (!document.body.classList.contains("blog") &&
!document.body.classList.contains("archive")) {
return;
}
window.dispatchEvent(new Event("resize"));
if (window.jQuery) {
window.jQuery(window).trigger("resize");
}
}
window.addEventListener("load", function () {
setTimeout(refreshBlogLayout, 250);
setTimeout(refreshBlogLayout, 900);
});
})();
/* ==========================================================
SHS V21 — REFRESH THEMEFUSE POSTLIST AFTER CARD REFLOW
========================================================== */
(function () {
function shsRefreshPostList() {
if (!document.querySelector(".postlist-col")) return;
window.dispatchEvent(new Event("resize"));
if (window.jQuery) {
window.jQuery(window).trigger("resize");
}
}
window.addEventListener("load", function () {
setTimeout(shsRefreshPostList, 100);
setTimeout(shsRefreshPostList, 500);
setTimeout(shsRefreshPostList, 1200);
});
})();
</script>