⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.1
Server IP:
185.238.29.86
Server:
Linux server2 6.8.12-6-pve #1 SMP PREEMPT_DYNAMIC PMX 6.8.12-6 (2024-12-19T19:05Z) x86_64
Server Software:
nginx/1.18.0
PHP Version:
8.1.31
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
var
/
www
/
dnc
/
assets
/
frontend
/
sass
/
sections
/
Edit File: _navbar.scss
/*---------------------------------------------- # Nav bar ----------------------------------------------*/ .navbar.navbar-area.white .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .navbar.navbar-area.nav-style-01 .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .navbar.navbar-area .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.50)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .mobile-logo { display: none; } @media only screen and (max-width:991px) { .mobile-logo { display: block; } .desktop-logo { display: none !important; } } .navbar-area { padding: 0; &.nav-absolute { position: absolute; left: 0; width: 100%; top: 0px; z-index: 1; } &.nav-style-02 { background-color: transparent; position: absolute; left: 0; top: 0; width: 100%; min-height: 100px; z-index: 2; &.has-topbar { top: 50px; } &.has-topbar-02 { top: 122px; } &.has-topbar-03 { top: 70px; } .nav-container { background-color: transparent; box-shadow: none; border-radius: 0; padding: 0 15px; &.social-nav { .navbar-collapse { .navbar-nav { text-align: center; li { &.current-menu-item { a { color: var(--main-color-one); } &:before { color: var(--main-color-one); } } &.menu-item-has-children { z-index: initial; &:before { color: var(--main-color-one); } } a { @include transition($transition); color: $white; } &:hover { &.menu-item-has-children { &:before { color: var(--main-color-one); } } a { color: var(--main-color-one); } } } } } } &.gym-nav { .navbar-collapse { .navbar-nav { text-align: center; li { &.current-menu-item { a { color: var(--secondary-color); } &:before { color: var(--secondary-color); } } &.menu-item-has-children { z-index: initial; &:before { color: var(--secondary-color); } } a { @include transition($transition); color: $white; } &:hover { &.menu-item-has-children { &:before { color: var(--secondary-color); } } a { color: var(--secondary-color); } } } } } } &.startup-nav { .navbar-collapse { .navbar-nav { text-align: center; li { &.current-menu-item { a { color: var(--secondary-color) } &:before { color: var(--secondary-color) } } &.menu-item-has-children { z-index: initial; &:before { color: var(--secondary-color) } } a { @include transition($transition); color: $white; } &:hover { &.menu-item-has-children { &:before { color: var(--secondary-color) } } a { color: var(--secondary-color) } } } } } .nav-right-content { .btn-wrapper { .boxed-btn { border-radius: 5px; margin-left: 15px; } } } } &.sass-nav { .navbar-collapse { .navbar-nav { text-align: right; li { &.current-menu-item { a { color: var(--secondary-color) } &:before { color: var(--secondary-color) } } &.menu-item-has-children { z-index: initial; &:before { color: var(--secondary-color) } } a { @include transition($transition); color: #283377; } &:hover { &.menu-item-has-children { &:before { color: var(--secondary-color) } } a { color: var(--secondary-color) } } } } } } &.inner-nav { .navbar-collapse { .navbar-nav { text-align: right; li { &.current-menu-item { a { color: var(--main-color-one); } &:before { color: var(--main-color-one); } } &.menu-item-has-children { z-index: initial; &:before { color: var(--main-color-one); } } a { @include transition($transition); color: #fff; } &:hover { &.menu-item-has-children { &:before { color: var(--main-color-one); } } a { color: var(--main-color-one); } } } } } } .logo-wrapper { max-width: 200px; } .nav-right-content { display: flex; align-items: center; ul { li { color: var(--heading-color); +li { margin-left: 5px; } a { color: var(--heading-color); } } } } .navbar-collapse { .navbar-nav { text-align: right; li { &.current-menu-item { a { color: var(--main-color-one); } &:before { color: var(--main-color-one); } } &.menu-item-has-children { z-index: initial; &:before { color: var(--heading-color); } .sub-menu { li { a { background-color: #fff; color: var(--paragraph-color); &:hover { background-color: var(--main-color-one); color: #fff; } } } .menu-item-has-children { &:hover>.sub-menu { li { &:hover { &:before { color: $white; } } a {} } } } } } a { @include transition($transition); color: var(--heading-color); } &:hover { &.menu-item-has-children { &:before { color: var(--main-color-one); } } a { color: var(--main-color-one); } } } } } } } &.nav-style-01 { background-color: var(--main-color-two); .nav-container { background-color: var(--main-color-two); box-shadow: none; border-radius: 0; padding: 0 15px; .nav-right-content { ul { li { color: var(--heading-color); a { color: var(--heading-color); } } } } .navbar-collapse { .navbar-nav { text-align: right; li { line-height: 110px; &.current-menu-item { a { color: var(--main-color-one); } &.menu-item-has-children { &:before { color: var(--main-color-one); } } } &.menu-item-has-children { z-index: initial; &:before { color: var(--heading-color); } .sub-menu { li { +li { border-top: 1px solid #e2e2e2; } a { background-color: #fff; color: var(--paragraph-color); &:hover { background-color: var(--main-color-one); color: #fff; } } } .menu-item-has-children { &:hover>.sub-menu { li { &:hover { &:before { color: $white; } } a {} } } } } } a { @include transition($transition); color: var(--heading-color); } &:hover { &.menu-item-has-children { &:before { color: var(--main-color-one); } } a { color: var(--main-color-one); } } } } } } } .nav-container { background-color: #fff; box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.2); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding: 0 30px; .nav-right-content { .btn-wrapper { margin-left: 40px; } ul { margin: 0; padding: 0; list-style: none; margin-left: 15px; li { display: inline-block; margin: 0 15px; &:last-child { margin-right: 0; } color: #6a7795; a { color: #6a7795; @include transition($transition); &:hover { color: var(--secondary-color); } } &.search { cursor: pointer; @include transition($transition); &:hover { color: var(--main-color-one); } } &.nav-btn { .btn-boxed { font-weight: 600; text-transform: capitalize; border-radius: 5px; background-color: var(--main-color-one); &:hover { background-color: var(--secondary-color); } } } } } } .navbar-brand { .site-title { font-weight: 700; font-size: 30px; font-family: var(--heading-font); line-height: 90px; color: var(--heading-color); } } .navbar-collapse { .navbar-nav { display: block; width: 100%; text-align: right; li { +li { margin-left: 40px; } display: inline-block; font-size: 14px; font-family: var(--body-font); text-transform: capitalize; font-weight: 600; line-height: 70px; &.current-menu-item { a { color: var(--main-color-one); } } &.menu-item-has-children { position: relative; z-index: 0; padding-right: 15px; &:before { position: absolute; right: 0; top: 50%; content: '\f107'; font-weight: 700; font-family: 'fontawesome'; @include transform(translateY(-50%)); @include transition($transition); } &:hover>.sub-menu { visibility: visible; opacity: 1; } .sub-menu { position: absolute; text-align: left; min-width: 220px; margin: 0; padding: 0; list-style: none; left: 0; top: 100%; box-shadow: 0 0 15px 0 rgba(#000, .05); background-color: $white; z-index: 9; border-bottom: 4px solid var(--main-color-one); visibility: hidden; opacity: 0; @include transition($transition); li { display: block; margin-left: 0; line-height: 24px; font-size: 14px; +li { border-top: 1px solid #e2e2e2; } a { display: block; padding: 12px 30px; background-color: #fff; white-space: nowrap; color: var(--paragraph-color); @include transition($transition); &:hover { background-color: var(--main-color-one); color: #fff; } } } .menu-item-has-children { position: relative; z-index: 0; padding-right: 0px; // &:before { // position: absolute; // right: 15px; // top: 50%; // content: '\f107'; // font-family: 'fontawesome'; // @include transform(translateY(-50%)); // } >.sub-menu { left: 100%; top: 0px; .sub-menu { .sub-menu { left: auto; right: 100%; } } } &:hover>.sub-menu { visibility: visible; opacity: 1; li { &:hover { &:before { color: $white; } } a {} } } } } } a { @include transition($transition); &:hover { color: var(--main-color-one); } } } } } } } @media only screen and (max-width: 991px) { .navbar-area { &.nav-style-02 { .nav-container { padding: 37px 0px; .navbar-toggler { background-color: #fff; } .navbar-collapse { .navbar-nav { background-color: var(--main-color-two); padding: 0 20px; li { &.menu-item-has-children { .sub-menu { li { a { background-color: transparent; color: rgba($white, .8); } } } } } } } } } &.nav-style-01 { .nav-container { padding: 20px 0px; .responsive-mobile-menu { .navbar-toggler { background-image: none; } } .navbar-collapse { .navbar-nav { text-align: left; li { line-height: 30px; &.current-menu-item { a { color: var(--main-color-one); } &.menu-item-has-children { &:before { color: var(--main-color-one); } } } &.menu-item-has-children { z-index: initial; &:before { color: rgba($white, .8); } .sub-menu { li { +li { border-top: 1px solid #e2e2e2; } a { background-color: transparent; color: var(--paragraph-color); &:hover { background-color: var(--main-color-one); color: #fff; } } } .menu-item-has-children { &:hover>.sub-menu { li { &:hover { &:before { color: #656565; } } a {} } } } } } a { @include transition($transition); color: rgba($white, .8); } &:hover { &.menu-item-has-children { &:before { color: var(--main-color-one); } } a { color: var(--main-color-one); } } } } } } } .nav-container { position: relative; z-index: 0; min-height: 80px; .responsive-mobile-menu { display: block; position: relative; width: 100%; .navbar-toggler { position: absolute; right: 0; top: 50%; @include transform(translateY(-50%)); border: 1px solid rgba($white, .8); } } .navbar-brand { display: block; .navbar-toggler { position: absolute; right: 10px; border: 1px solid #e2e2e2; } } .navbar-collapse { .navbar-nav { display: block; margin-top: 20px; li { display: block; text-align: left; line-height: 30px; padding: 10px 0; border-bottom: 1px solid rgba($white, .2); &:last-child { border-bottom: none; } +li { margin-left: 0; } &.menu-item-has-children { &:before { top: 25px; right: 20px; } &:hover { padding-bottom: 0; >.sub-menu { visibility: visible; height: auto; opacity: 1; background-color: transparent; border-bottom: none; padding-top: 10px; } } .sub-menu { position: initial; display: block; width: 100%; border-top: none; box-shadow: none; margin-left: 0; padding-bottom: 0; visibility: hidden; opacity: 0; height: 0; overflow: hidden; max-height: 250px; overflow-y: scroll; @include transition(height 500ms); .sub-menu .menu-item-has-children:before { content: "\f107"; } li { &.menu-item-has-children { &:hover { &:before { color: $white; } } } padding: 0; +li { border-top: none; } &:first-child { border-top: 1px solid rgba($white, .2); } } } } } } } } } } @media only screen and (max-width: 575px) { .navbar-area { .nav-container { margin: 0 15px; } } }
Simpan