/*==================================================
SKILLLIFT — PROFESSIONAL MOBILE NAVIGATION
Built for: jQuery Simple MobileMenu plugin
Wrapper classes generated by plugin:
#sm_menu_ham -> hamburger (appended to )
.sm_menu_outer.slide -> menu panel (appended to )
ul.mobile_menu -> your existing menu markup (moved inside wrapper)
li.hasChild -> auto-added to any that has a .sub-menu
li.back -> auto-prepended inside every .sub-menu
body.mmactive -> added when menu is open
==================================================*/
:root{
--sl-dark: #002935;
--sl-dark-2: #0F2B5A;
--sl-blue: #0D5FF9;
--sl-white: #ffffff;
--sl-muted: rgba(255,255,255,0.55);
--sl-border: rgba(255,255,255,0.08);
--sl-radius: 10px;
}
/* Prevent padding from causing horizontal overflow inside the panel
(which was clipping the ">" chevron against overflow-x:hidden) */
.sm_menu_outer,
.sm_menu_outer *{
box-sizing: border-box;
}
/*--------------------------------------------------
0. Lock scroll when menu is open
--------------------------------------------------*/
body.mmactive{
overflow: hidden;
}
/*--------------------------------------------------
1. HAMBURGER BUTTON
(plugin appends this straight to , so it is
fixed-positioned to sit visually inside the header)
--------------------------------------------------*/
#sm_menu_ham{
position: fixed;
top: 22px;
right: 20px;
width: 46px;
height: 46px;
display: none; /* shown only on mobile via media query below */
background: var(--sl-blue);
border: 2px solid #ffffff;
border-radius: 50%;
cursor: pointer;
z-index: 100001; /* above the slide panel */
box-shadow: 0 6px 18px rgba(13,95,249,0.4);
transition: background .35s ease, box-shadow .35s ease, transform .2s ease;
}
#sm_menu_ham:active{
transform: scale(0.94);
}
/* All spans positioned absolutely & centered so the transform math is
predictable. Plugin needs exactly 4 spans to exist; we only show 3
of them as visible bars and hide the 4th (nth-child(3)). */
#sm_menu_ham span{
position: absolute !important;
left: 50% !important;
width: 20px !important;
height: 2.5px !important;
border-radius: 3px !important;
background: #ffffff !important;
transform: translate(-50%, 0) !important;
transition: top .3s ease, transform .3s ease, opacity .3s ease;
opacity: 1 !important;
margin: 0 !important;
box-shadow: none !important;
filter: none !important;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
will-change: transform;
}
#sm_menu_ham span:nth-child(1){ top: 17px !important; }
#sm_menu_ham span:nth-child(2){ top: 22px !important; }
#sm_menu_ham span:nth-child(3){ display: none !important; } /* extra 4th span not needed visually */
#sm_menu_ham span:nth-child(4){ top: 27px !important; }
#sm_menu_ham.open{
background: var(--sl-blue) !important;
box-shadow: 0 6px 20px rgba(13,95,249,0.5) !important;
}
#sm_menu_ham.open span:nth-child(1){
top: 22px !important;
transform: translate(-50%, 0) rotate(45deg) !important;
}
#sm_menu_ham.open span:nth-child(2){
opacity: 0 !important;
}
#sm_menu_ham.open span:nth-child(4){
top: 22px !important;
transform: translate(-50%, 0) rotate(-45deg) !important;
}
/*--------------------------------------------------
2. MENU PANEL (slide style)
--------------------------------------------------*/
.sm_menu_outer{
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 380px;
height: 100%;
background: #f5f7fb !important;
transform: translateX(100%);
transition: transform .45s cubic-bezier(.4,0,.2,1);
z-index: 100000 !important;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
box-shadow: -10px 0 40px rgba(0,0,0,0.15);
opacity: 1 !important;
}
.sm_menu_outer.active{
transform: translateX(0);
z-index: 100000 !important;
opacity: 1 !important;
}
/* dim background behind the panel — attached to body (not .sm_menu_outer)
because .sm_menu_outer has a CSS transform, which would make position:fixed
descendants size themselves relative to the panel instead of the full
viewport. Triggered via body.mmactive, which the plugin already adds. */
body::before{
content: '';
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 99999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .35s ease, visibility .35s ease;
}
body.mmactive::before{
opacity: 1;
visibility: visible;
}
/* Brand strip at the very top of the panel.
IMPORTANT: this must be ::before (not ::after) so it renders as the
FIRST child, above ul.mobile_menu — otherwise it falls after the
menu list in normal flow, creating a gap below "Contact" and
bleeding into the submenu overlay when a submenu is open. */
.sm_menu_outer::before{
content: 'SKILLLIFT';
display: block;
padding: 28px 24px 18px;
font-size: 20px;
font-weight: 800;
letter-spacing: 1px;
color: var(--sl-dark);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
/*--------------------------------------------------
3. TOP-LEVEL MENU LIST
--------------------------------------------------*/
.sm_menu_outer ul.mobile_menu{
list-style: none;
margin: 0;
padding: 10px 0 100px !important; /* bottom space for fixed CTA */
}
.sm_menu_outer ul.mobile_menu > li{
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sm_menu_outer ul.mobile_menu > li > a{
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
font-size: 16px;
font-weight: 600;
color: var(--sl-dark);
transition: color .25s ease, padding-left .25s ease;
}
.sm_menu_outer ul.mobile_menu > li > a:hover,
.sm_menu_outer ul.mobile_menu > li > a:focus{
color: var(--sl-blue);
padding-left: 30px;
}
/* chevron for items that open a submenu */
.sm_menu_outer li.hasChild > a::after{
content: '';
width: 8px;
height: 8px;
border-right: 2px solid rgba(0,0,0,0.35);
border-bottom: 2px solid rgba(0,0,0,0.35);
transform: rotate(-45deg);
transition: border-color .25s ease;
}
.sm_menu_outer li.hasChild > a:hover::after{
border-color: var(--sl-blue);
}
/*--------------------------------------------------
4. SUBMENU (drill-down slide panel)
--------------------------------------------------*/
.sm_menu_outer ul.sub-menu,
.sm_menu_outer.slide .mobile_menu .sub-menu,
.sm_menu_outer .mobile_menu .sub-menu{
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background: #ffffff !important;
background-color: #ffffff !important;
transform: translateX(100%);
transition: transform .4s cubic-bezier(.4,0,.2,1);
z-index: 5;
isolation: isolate;
contain: layout paint style;
-webkit-transform: translateX(100%);
right: auto !important; /* neutralise theme's right:-100% positioning */
height: auto !important;
}
/* when the parent is active, slide its submenu into view */
.sm_menu_outer li.hasChild.active > ul.sub-menu{
transform: translateX(0);
}
.sm_menu_outer ul.sub-menu li a{
display: block;
padding: 15px 24px;
font-size: 15px;
font-weight: 500;
color: var(--sl-dark);
transition: background .25s ease, color .25s ease, padding-left .25s ease;
}
.sm_menu_outer ul.sub-menu li a:hover,
.sm_menu_outer ul.sub-menu li a:focus{
background: rgba(13,95,249,0.08);
color: var(--sl-blue);
padding-left: 30px;
}
.sm_menu_outer ul.sub-menu li{
border-bottom: 1px solid rgba(0,0,0,0.08);
background: #ffffff !important;
position: relative;
}
/* category labels (CRYPTO COURSES / LANGUAGE COURSES / OTHER COURSES) */
.sm_menu_outer ul.sub-menu li.menu-section{
padding: 16px 24px 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
color: var(--sl-blue);
border-bottom: none;
}
.sm_menu_outer ul.sub-menu li.section-divider{
height: 1px;
margin: 6px 24px;
background: rgba(0,0,0,0.08);
border: none;
}
/*--------------------------------------------------
5. BACK ROW (auto-generated "li.back", shown as a
sticky header inside the submenu — matches the
"← COURSES" bar from your screenshot)
--------------------------------------------------*/
.sm_menu_outer li.back{
position: relative;
background: #ffffff;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.sm_menu_outer li.back a{
display: flex !important;
align-items: center;
gap: 12px;
padding: 22px 24px !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--sl-blue) !important;
text-transform: uppercase;
letter-spacing: .5px;
}
.sm_menu_outer li.back a::before{
content: '';
width: 9px;
height: 9px;
border-left: 2px solid var(--sl-blue);
border-bottom: 2px solid var(--sl-blue);
transform: rotate(45deg);
flex-shrink: 0;
}
.sm_menu_outer li.back a:hover{
padding-left: 24px !important; /* prevent hover shift from base rule */
}
/*--------------------------------------------------
6. FIXED CLOSE (X) — reuses the hamburger button,
which stays visible (fixed) above the open panel
--------------------------------------------------*/
/* handled already by #sm_menu_ham.open above */
/*--------------------------------------------------
7. BOTTOM CTA — Login / Register
--------------------------------------------------*/
.sm_menu_outer{
padding-bottom: 0;
}
.sm_menu_cta{
display: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-width: 380px;
padding: 16px 24px 22px;
background: linear-gradient(180deg, rgba(245,247,251,0) 0%, #f5f7fb 40%);
z-index: 100002;
}
/* Only show the CTA while the mobile menu panel is actually open.
This also fixes it appearing as a stray duplicate button on desktop
(since #sm_menu_ham/hamburger is hidden there, body.mmactive never
gets added, so this rule simply never activates on desktop). */
body.mmactive .sm_menu_cta{
display: block;
}
.sm_menu_cta a{
display: block;
text-align: center;
padding: 14px;
border-radius: 30px;
background: var(--sl-blue);
color: var(--sl-white) !important;
font-weight: 700;
font-size: 15px;
box-shadow: 0 8px 20px rgba(13,95,249,0.35);
transition: background .3s ease;
}
.sm_menu_cta a:hover{
background: var(--sl-dark-2);
}
/*--------------------------------------------------
8. RESPONSIVE BREAKPOINTS
--------------------------------------------------*/
/* Show mobile nav from tablets down; hide desktop nav */
@media (max-width: 991px){
#sm_menu_ham{ display: flex; }
#main-menu{ display: none !important; }
/* Instead of hiding the desktop Login/Register button, turn it into a
small pill anchored inside the header itself (position:absolute,
relative to #navigation) — it sits next to the hamburger at the top
of each page, then scrolls away naturally with the header, instead
of persisting as a fixed overlay across all page content. */
#navigation .white-btn.bt{
display: inline-block !important;
position: absolute !important;
top: 24px;
right: 76px;
padding: 7px 18px !important;
font-size: 13px !important;
background: var(--sl-blue) !important;
color: #ffffff !important;
border-color: var(--sl-blue) !important;
border-radius: 30px;
z-index: 100;
box-shadow: 0 4px 14px rgba(13,95,249,0.35);
}
}
/* Full-width panel on small phones */
@media (max-width: 420px){
.sm_menu_outer,
.sm_menu_cta{
max-width: 100%;
}
.sm_menu_outer ul.mobile_menu > li > a{
padding: 16px 20px;
font-size: 15px;
}
.sm_menu_outer ul.sub-menu li a{
padding: 13px 20px;
}
.sm_menu_outer li.back a{
padding: 20px 20px !important;
font-size: 16px !important;
}
}
/* Very small devices (iPhone SE etc.) */
@media (max-width: 375px){
#sm_menu_ham{
top: 16px;
right: 14px;
width: 40px;
height: 40px;
}
#navigation .white-btn.bt{
top: 20px;
right: 62px;
padding: 6px 14px !important;
font-size: 12px !important;
}
.sm_menu_outer::before{
padding: 22px 20px 14px;
font-size: 18px;
}
}