.admin-bar .side-navigation {
top: var(--admin-bar-height);
}
.side-navigation {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 3000;
width: 340px;
height: auto;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
transition: all 0.25s ease;
will-change: transform, opacity;
box-sizing: content-box;
background: #fff;
box-shadow: 8px 11px 29px 0px rgba(125, 138, 152, 0.15);
}
.side-navigation_wrapper {
text-align: left;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 100px;
}
.side-navigation_body {
position: relative;
z-index: 1;
top: 0;
left: 0;
padding: 34px 20px;
width: auto;
height: calc(100% - 100px);
box-sizing: border-box;
overflow-y: scroll;
transition: all 0.3s;
-ms-overflow-style: none; scrollbar-width: none; overscroll-behavior-y: contain;
scrollbar-width: none;
}
.side-navigation_body::-webkit-scrollbar {
display: none;
}
.side-navigation_toggle {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
margin-top: 34px;
right: -28px;
height: 55px;
width: 28px;
border-radius: 0px 5px 5px 0px;
color: rgb(255, 255, 255);
text-align: center;
padding: 0;
text-orientation: mixed;
white-space: nowrap;
background-color: var(--ureg-button-bg-idle);
cursor: pointer;
overflow: hidden;
backface-visibility: hidden;
transition: 0.45s ease-in-out;
opacity: 1;
}
.side-navigation_toggle .side-navigation_dots {
position: relative;
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
border: 0;
}
.side-navigation_toggle .side-navigation_dots:before, .side-navigation_toggle .side-navigation_dots:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
background-color: inherit;
border-radius: inherit;
}
.side-navigation_toggle .side-navigation_dots:before {
top: -10px;
}
.side-navigation_toggle .side-navigation_dots:after {
top: 10px;
}
.side-navigation .primary-nav > ul {
display: flex;
flex-direction: column;
white-space: nowrap;
margin-top: 0;
}
.side-navigation .primary-nav > ul > li {
margin-bottom: 2px;
}
.side-navigation .primary-nav > ul > li > a {
padding: 17px 12px;
}
.side-navigation .primary-nav li {
display: block;
float: none;
height: auto;
padding: 0;
position: relative;
}
.side-navigation .primary-nav li.bp-menu:before {
font-family: Flaticon;
font-size: inherit;
font-style: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.side-navigation .primary-nav li.bp-menu.bp-forums-nav:before {
content: "\f10c";
}
.side-navigation .primary-nav li.bp-menu.bp-friends-nav:before {
content: "\f104";
}
.side-navigation .primary-nav li.bp-menu.bp-bp-messages-nav:before, .side-navigation .primary-nav li.bp-menu.bp-messages-nav:before {
content: "\f10c";
}
.side-navigation .primary-nav li.bp-menu.bp-notifications-nav:before {
content: "\f11d";
}
.side-navigation .primary-nav li.bp-menu.bp-settings-nav:before {
content: "\f12c";
}
.side-navigation .primary-nav li.bp-menu.bp-profile-nav:before {
content: "\f10a";
}
.side-navigation .primary-nav li.bp-menu.bp-invitations-nav:before {
content: "\f10b";
}
.side-navigation .primary-nav li.bp-menu.bp-docs-nav:before {
content: "\f10e";
}
.side-navigation .primary-nav li.bp-menu.bp-logout-nav:before {
content: "\f127";
}
.side-navigation .primary-nav li.bp-menu.bp-invitations-nav:before {
content: "\f10b";
}
.side-navigation .primary-nav li.bp-menu.bp-login-nav:before {
content: "\f10a";
}
.side-navigation .primary-nav li.bp-menu.bp-activity-nav:before {
content: "\f153";
}
.side-navigation .primary-nav li.bp-menu.bp-register-nav:before {
content: "\f126";
}
.side-navigation .primary-nav li.wgl-letter, .side-navigation .primary-nav li.bp-menu, .side-navigation .primary-nav li.wgl-icon {
transition: 0s;
}
.side-navigation .primary-nav li.wgl-letter:before, .side-navigation .primary-nav li.bp-menu:before, .side-navigation .primary-nav li.wgl-icon:before {
position: absolute;
transition: 0.3s;
z-index: 2;
top: 0;
left: 0;
width: 55px;
height: 55px;
font-size: 1.54em;
margin-top: 1px;
line-height: 55px;
display: block;
text-align: center;
pointer-events: none;
}
.side-navigation .primary-nav li.wgl-letter:hover, .side-navigation .primary-nav li.bp-menu:hover, .side-navigation .primary-nav li.wgl-icon:hover {
color: inherit;
}
.side-navigation .primary-nav li.wgl-letter > a, .side-navigation .primary-nav li.bp-menu > a, .side-navigation .primary-nav li.wgl-icon > a {
padding-left: 3.46em;
}
.side-navigation .primary-nav li.wgl-letter:before {
content: attr(data-fl);
margin-top: 0;
}
.side-navigation .primary-nav li a {
padding: 10px 0;
margin: 0;
position: relative;
border-radius: 5px;
transform: translateX(0);
}
.side-navigation .primary-nav li a span {
padding: 0;
display: inline;
line-height: initial;
}
.side-navigation .primary-nav li.mega-menu-links > ul > li {
width: 100%;
}
.side-navigation .primary-nav li:hover:before {
color: var(--ureg-primary-color);
}
.side-navigation .primary-nav li:hover > a {
background-color: var(--ureg-tertiary-color);
}
.side-navigation .primary-nav li[class*=current]:before {
color: var(--ureg-primary-color);
}
.side-navigation .primary-nav li[class*=current] > a {
color: var(--ureg-primary-color);
background-color: rgba(var(--ureg-primary-rgb), 0.1);
}
.side-navigation .primary-nav li.wgl-title-item > a {
font-size: 12px;
font-weight: 700;
color: #9CA9CC;
background: transparent !important;
pointer-events: none;
letter-spacing: 0.1em;
padding-left: 15px;
padding-top: 23px;
padding-bottom: 6px;
}
.side-navigation .primary-nav li.wgl-title-item > a:before {
content: "";
height: 1px;
width: 0;
background-color: #D4DBEE;
margin: auto;
position: absolute;
left: 0;
transition: 0.4s;
opacity: 0;
visibility: hidden;
right: 0;
}
.side-navigation .primary-nav li.menu-item-has-children:after {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border: 1px solid transparent;
border-radius: 5px;
z-index: 2;
pointer-events: none;
}
.side-navigation .primary-nav ul > li.menu-item-has-children > a::after,
.side-navigation .primary-nav ul > li.mega-menu.mega-cat > a::after {
margin-left: 0;
}
.side-navigation .primary-nav ul li ul {
position: relative;
top: 0 !important;
left: 0;
right: 0 !important;
width: 100%;
box-sizing: border-box;
padding: 7px 0;
color: inherit;
opacity: 1;
visibility: visible;
white-space: initial;
overflow: hidden;
transform: none !important;
min-width: initial;
background-color: inherit;
transition: 0s;
}
.side-navigation .primary-nav ul li ul li {
margin-left: 2.5em;
margin-right: 2.5em;
margin-bottom: 3px;
}
.side-navigation .primary-nav ul li ul li.bp-menu:before, .side-navigation .primary-nav ul li ul li.wgl-letter:before, .side-navigation .primary-nav ul li ul li.wgl-icon:before {
font-size: 1.2em;
width: 40px;
height: 40px;
line-height: 40px;
}
.side-navigation .primary-nav ul li ul li.bp-menu > a, .side-navigation .primary-nav ul li ul li.wgl-letter > a, .side-navigation .primary-nav ul li ul li.wgl-icon > a {
padding-left: 2.66em;
}
.side-navigation .primary-nav ul li ul a {
padding: 11px 12px;
font-size: 14px;
font-weight: 500;
transition: 0.4s;
}
.side-navigation .primary-nav ul li ul a span {
transition: 0s;
}
.side-navigation .primary-nav ul li ul.sub-menu,
.side-navigation .primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li ul,
.side-navigation .primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul {
box-shadow: none;
margin-top: 0;
border: none;
width: 100%;
display: none;
}
.side-navigation .primary-nav ul li ul.sub-menu:after,
.side-navigation .primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li ul:after,
.side-navigation .primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul:after {
display: none;
}
.side-navigation .primary-nav .menu-item__plus,
.side-navigation .primary-nav .menu-item_dots {
display: none;
}
.side-navigation .primary-nav ul li.mega-menu-links > ul.mega-menu .item_text > img {
display: none;
}
.side-navigation .primary-nav .button_switcher_vertical {
transition: transform 0.7s, opacity 1s;
}
.side-navigation_close {
width: 95px;
}
.side-navigation_close .primary-nav ul li a span {
opacity: 0;
transform: translateX(-100%) scale(0);
}
.side-navigation_close .primary-nav > ul > li > a,
.side-navigation_close .primary-nav > ul > li.wgl-letter > a,
.side-navigation_close .primary-nav > ul > li.bp-menu > a,
.side-navigation_close .primary-nav > ul > li.wgl-icon > a {
max-width: 55px;
max-height: 55px;
padding: 1.063em 0 1.063em 3.46em;
}
.side-navigation_close .primary-nav > ul > li.wgl-title-item,
.side-navigation_close .primary-nav > ul > li.wgl-letter.wgl-title-item,
.side-navigation_close .primary-nav > ul > li.bp-menu.wgl-title-item,
.side-navigation_close .primary-nav > ul > li.wgl-icon.wgl-title-item {
max-width: 45px;
max-height: 45px;
margin-left: auto;
margin-right: auto;
}
.side-navigation_close .primary-nav li.wgl-title-item > a:before {
width: 15px;
opacity: 1;
visibility: visible;
}
.side-navigation_close .primary-nav li.menu-item-has-children.active_item {
margin-bottom: 12px;
}
.side-navigation_close .primary-nav li.menu-item-has-children.active_item:after {
border: 1px solid #D4DBEE;
}
.side-navigation_close .primary-nav ul li ul li {
margin-left: 0.469em;
margin-right: 0.469em;
}
.side-navigation_close .primary-nav ul li ul li.bp-menu, .side-navigation_close .primary-nav ul li ul li.wgl-letter, .side-navigation_close .primary-nav ul li ul li.wgl-icon {
padding: 0;
}
.side-navigation_close .primary-nav ul li ul li.bp-menu > a, .side-navigation_close .primary-nav ul li ul li.wgl-letter > a, .side-navigation_close .primary-nav ul li ul li.wgl-icon > a {
max-width: 40px;
max-height: 40px;
padding-left: 2em;
}
.side-navigation_close .primary-nav .button_switcher_vertical {
transition: all 0s;
}
.side-navigation ~ .page-header,
.side-navigation ~ footer,
.side-navigation ~ #main {
margin-left: 340px;
transition: margin-left 0.45s ease;
}
.side-navigation_close ~ .page-header,
.side-navigation_close ~ footer,
.side-navigation_close ~ #main {
margin-left: 95px;
}
@media (max-width: 1200px) {
.side-navigation {
display: none;
}
.side-navigation ~ .page-header,
.side-navigation ~ footer,
.side-navigation ~ #main {
margin-left: 0;
}
}
@media (min-width: 1200px) and (max-width: 1875px) {
body.side-nav .wgl-container {
width: auto;
--ureg-content-max-width: calc(100vw - 358px - 60px);
--ureg-elementor-container-width: calc(100vw - 358px - 30px);
}
body.side-nav .wgl-mobile-header .wgl-container {
width: 950px;
--ureg-content-max-width: auto;
}
}
@media (min-width: 1200px) and (max-width: 1534px) {
.side-navigation ~ #main .row .sidebar-container.wgl_col-3,
.side-navigation ~ #main .row .sidebar-container.wgl_col-4,
.side-navigation ~ #main .row #main-content.wgl_col-6,
.side-navigation ~ #main .row #main-content.wgl_col-8,
.side-navigation ~ #main .row #main-content.wgl_col-9 {
width: 100%;
order: unset;
}
.side-navigation ~ #main .row.sidebar_double .sidebar-container.wgl_col-3 {
width: 50%;
}
.side-navigation ~ #main #buddypress {
padding-bottom: 30px;
}
}