Skip to content

M
makura-2025
Commit c0539ccc by Arjun Jhukal
Options

udpated the header and fixed button

parent d4b4792f
Showing with 112 additions and 49 deletions
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/js/style.js
...@@ -433,28 +433,6 @@ ...@@ -433,28 +433,6 @@
// }); // });
// }); // });
let lastScrollTop = 0;
let scrollTimeout;
$(window).on("scroll", function () {
clearTimeout(scrollTimeout);
const scrollTop = $(this).scrollTop();
scrollTimeout = setTimeout(() => {
$(".menu-item-has-children").removeClass("show");
if (scrollTop > 120 && scrollTop < lastScrollTop) {
$(".navbar").addClass("sticky-top");
$(".sticky-tab").addClass("sticky-with-header");
} else {
$(".navbar").removeClass("sticky-top");
$(".sticky-tab").removeClass("sticky-with-header");
}
lastScrollTop = scrollTop;
}, 100); // Small delay to prevent flickering
});
$(".button-close").click(function () { $(".button-close").click(function () {
$(".modal-dialog").addClass("addCss"); $(".modal-dialog").addClass("addCss");
...@@ -488,17 +466,53 @@ ...@@ -488,17 +466,53 @@
}, },
}); });
$(function () {
let lastScrollTop = 0;
let scrollTimeout;
$(window).on("scroll", function () {
clearTimeout(scrollTimeout);
const scrollTop = $(this).scrollTop();
scrollTimeout = setTimeout(() => {
$(".menu-item-has-children").removeClass("show");
if (scrollTop > 120 && scrollTop < lastScrollTop) {
$(".navbar").addClass("sticky-top");
$(".sticky-tab").addClass("sticky-with-header");
} else {
$(".navbar").removeClass("sticky-top");
$(".sticky-tab").removeClass("sticky-with-header");
}
lastScrollTop = scrollTop;
}, 100);
});
})
// returntotop // returntotop
$(function () {
let lastScrollTop = 0;
$(window).scroll(function () { $(window).scroll(function () {
if ($(this).scrollTop() >= 200) { let currentScrollTop = $(this).scrollTop();
$("#return-to-top").show(200);
// Only show if scrolling up and scrolled at least 200px
if (currentScrollTop < lastScrollTop && currentScrollTop >= 200) {
$("#return-to-top").fadeIn(200);
} else { } else {
$("#return-to-top").hide(200); $("#return-to-top").fadeOut(200);
} }
lastScrollTop = currentScrollTop;
}); });
$("#return-to-top").click(function () { $("#return-to-top").click(function () {
$("body,html").animate({ scrollTop: 0 }, 1000); $("html, body").animate({ scrollTop: 0 }, 1000);
}); });
})
//thankyou message for comment in blog-detail //thankyou message for comment in blog-detail
$("#submitBtn").click(function () { $("#submitBtn").click(function () {
......
dev/sass/base/_base.scss
...@@ -40,6 +40,7 @@ body { ...@@ -40,6 +40,7 @@ body {
font-family: $body-font; font-family: $body-font;
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
&.no-scroll { &.no-scroll {
overflow: hidden !important; overflow: hidden !important;
} }
...@@ -93,6 +94,7 @@ p { ...@@ -93,6 +94,7 @@ p {
font-size: 1.125rem; font-size: 1.125rem;
color: #58595a; color: #58595a;
letter-spacing: -0.5px; letter-spacing: -0.5px;
@media (max-width: 991px) { @media (max-width: 991px) {
letter-spacing: 0; letter-spacing: 0;
} }
...@@ -647,11 +649,14 @@ ul { ...@@ -647,11 +649,14 @@ ul {
} }
// 9: Return to Top Start // 9: Return to Top Start
#return-to-top { .fixed-button-wrapper {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
bottom: 20px; bottom: 20px;
right: 2%; right: 2%;
}
#return-to-top {
background: $primary; background: $primary;
width: 50px; width: 50px;
height: 50px; height: 50px;
...@@ -699,7 +704,7 @@ ul { ...@@ -699,7 +704,7 @@ ul {
} }
.text-content { .text-content {
& > span { &>span {
font-size: 1.25rem; font-size: 1.25rem;
color: #000000; color: #000000;
letter-spacing: 0.28em; letter-spacing: 0.28em;
...@@ -1122,6 +1127,7 @@ ul { ...@@ -1122,6 +1127,7 @@ ul {
} }
.text-wrapper { .text-wrapper {
h1, h1,
h2, h2,
h3, h3,
...@@ -1365,6 +1371,7 @@ ul { ...@@ -1365,6 +1371,7 @@ ul {
display: flex !important; display: flex !important;
.job-list { .job-list {
h1, h1,
h2, h2,
h3, h3,
...@@ -1409,12 +1416,15 @@ ul { ...@@ -1409,12 +1416,15 @@ ul {
.breadcrumb-background-dark { .breadcrumb-background-dark {
padding-bottom: 0; padding-bottom: 0;
padding-top: 4.5rem !important; padding-top: 4.5rem !important;
&.background-dark { &.background-dark {
background: #005aff !important; background: #005aff !important;
} }
&.breadcrumb-background-dark { &.breadcrumb-background-dark {
padding-bottom: 2.5rem !important; padding-bottom: 2.5rem !important;
} }
ol, ol,
ul { ul {
margin: 0; margin: 0;
...@@ -1426,7 +1436,7 @@ ul { ...@@ -1426,7 +1436,7 @@ ul {
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item+.breadcrumb-item {
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
...@@ -1442,6 +1452,7 @@ ul { ...@@ -1442,6 +1452,7 @@ ul {
.vacancy-detail-breadcrumb { .vacancy-detail-breadcrumb {
padding-top: 4.5rem !important; padding-top: 4.5rem !important;
background: #121526 !important; background: #121526 !important;
ol, ol,
ul { ul {
margin: 0; margin: 0;
...@@ -1453,7 +1464,7 @@ ul { ...@@ -1453,7 +1464,7 @@ ul {
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item+.breadcrumb-item {
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
...@@ -1471,11 +1482,13 @@ ul { ...@@ -1471,11 +1482,13 @@ ul {
.col-lg-9 { .col-lg-9 {
padding-left: 0.8125rem; padding-left: 0.8125rem;
} }
.terms-sidebar-wrapper { .terms-sidebar-wrapper {
position: sticky; position: sticky;
top: 20%; top: 20%;
margin-right: 2.5rem; margin-right: 2.5rem;
padding-bottom: 1.875rem; padding-bottom: 1.875rem;
ul { ul {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
...@@ -1569,6 +1582,7 @@ ul { ...@@ -1569,6 +1582,7 @@ ul {
//YOU-MAY-LIKE //YOU-MAY-LIKE
.YOU-MAY-LIKE { .YOU-MAY-LIKE {
.main-wrapper .top-title-wrapper p, .main-wrapper .top-title-wrapper p,
span { span {
color: #000 !important; color: #000 !important;
......
dev/sass/base/_header.scss
///top-nav //top-nav
.header-placeholder {
height: 65px;
}
@media (min-width:992px) {
.header-placeholder {
height: 86px;
}
}
.top-nav { .top-nav {
width: 100%; width: 100%;
background-color: $white; background-color: $white;
...@@ -7,11 +17,17 @@ ...@@ -7,11 +17,17 @@
left: 0; left: 0;
z-index: 111; z-index: 111;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
position: absolute;
top: 0;
@media (max-width: 1030px) { @media (max-width: 1030px) {
.navbar-nav { .navbar-nav {
flex-direction: column !important; flex-direction: column !important;
} }
} }
.side-menu-close { .side-menu-close {
@media (max-width: 1030px) { @media (max-width: 1030px) {
display: block !important; display: block !important;
...@@ -117,6 +133,7 @@ ...@@ -117,6 +133,7 @@
@media (max-width: 1030px) { @media (max-width: 1030px) {
margin-right: 0; margin-right: 0;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
} }
...@@ -181,7 +198,7 @@ ...@@ -181,7 +198,7 @@
&.menu-item-has-children { &.menu-item-has-children {
position: relative; position: relative;
> a { >a {
padding-right: 24px; padding-right: 24px;
position: relative; position: relative;
...@@ -199,11 +216,12 @@ ...@@ -199,11 +216,12 @@
&:hover, &:hover,
&.show { &.show {
> ul { >ul {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translateY(0); transform: translateY(0);
} }
a { a {
&::before { &::before {
transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg);
...@@ -231,6 +249,7 @@ ...@@ -231,6 +249,7 @@
left: 100%; left: 100%;
top: 0; top: 0;
} }
a { a {
display: block; display: block;
padding: 12px 36px 12px 24px; padding: 12px 36px 12px 24px;
...@@ -238,13 +257,15 @@ ...@@ -238,13 +257,15 @@
&::after { &::after {
content: unset; content: unset;
} }
&::before { &::before {
right: 24px; right: 24px;
} }
} }
&:hover, &:hover,
&.active { &.active {
> a { >a {
background-color: rgba(44, 92, 218, 20%); background-color: rgba(44, 92, 218, 20%);
} }
} }
...@@ -324,9 +345,12 @@ ...@@ -324,9 +345,12 @@
// brightness(140%); // brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06); -webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards; animation: slideDown 0.8s ease forwards;
position: fixed;
// overflow: hidden; // overflow: hidden;
@media (max-width: 1030px) { @media (max-width: 1030px) {
animation: unset; animation: unset;
.navbar-nav { .navbar-nav {
flex-direction: column !important; flex-direction: column !important;
} }
...@@ -414,6 +438,7 @@ ...@@ -414,6 +438,7 @@
li { li {
width: 100%; width: 100%;
a { a {
// padding-left: 0 !important; // padding-left: 0 !important;
color: $black !important; color: $black !important;
...@@ -424,6 +449,7 @@ ...@@ -424,6 +449,7 @@
} }
} }
} }
.top-nav { .top-nav {
.nav-wrapper { .nav-wrapper {
.nav-right { .nav-right {
...@@ -443,6 +469,7 @@ ...@@ -443,6 +469,7 @@
padding-left: 12px; padding-left: 12px;
// border-radius: 12px; // border-radius: 12px;
} }
ul { ul {
padding-left: 12px; padding-left: 12px;
} }
...@@ -451,7 +478,7 @@ ...@@ -451,7 +478,7 @@
&:hover, &:hover,
&.show { &.show {
> ul { >ul {
display: block; display: block;
} }
} }
......
dev/sass/pages/_index.scss
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
} }
.whats-app-icon-wrapper { .whats-app-icon-wrapper {
position: fixed; // position: fixed;
bottom: 80px; // bottom: 80px;
right: 2%; // right: 2%;
max-width: 51px; max-width: 51px;
// padding: 10px; // padding: 10px;
border-radius: 5px; border-radius: 5px;
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
} }
.whats-app-icon-wrapper .tooltip-wrapper { .whats-app-icon-wrapper .tooltip-wrapper {
top: 23%; top: 50%;
transform: translateY(-50%);
left: -8rem; left: -8rem;
background-color: #34c759; background-color: #34c759;
border-radius: 8px; border-radius: 8px;
......
footer.php
...@@ -332,14 +332,15 @@ ...@@ -332,14 +332,15 @@
</div> </div>
</footer> </footer>
<a href="javascript:void(0)" id="return-to-top">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" <div class="fixed-button-wrapper">
stroke-linejoin="round" class="css-i6dzq1"> <a href="javascript:void(0)" id="return-to-top">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="#fff" stroke-width="2" fill="none"
stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<polyline points="18 15 12 9 6 15"></polyline> <polyline points="18 15 12 9 6 15"></polyline>
</svg> </svg>
</a> </a>
<div class="whats-app-icon-wrapper position-relative">
<div class="whats-app-icon-wrapper">
<a href="https://wa.me/<?php echo get_field('whats_app_number', 'option'); ?>" target="_blank"> <a href="https://wa.me/<?php echo get_field('whats_app_number', 'option'); ?>" target="_blank">
<svg width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
...@@ -353,6 +354,7 @@ ...@@ -353,6 +354,7 @@
<div class="position-absolute tooltip-wrapper"> <div class="position-absolute tooltip-wrapper">
<p>Chat with us</p> <p>Chat with us</p>
</div> </div>
</div>
</div> </div>
<div class="download-popup"> <div class="download-popup">
......
header.php
...@@ -59,9 +59,11 @@ ...@@ -59,9 +59,11 @@
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Start class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Start
your project your project
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" <path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z" fill="white"></path> d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg> </svg>
<span class="bg-hover" style="left: 108px; top: 62.1562px;"></span> <span class="bg-hover" style="left: 108px; top: 62.1562px;"></span>
</a> </a>
...@@ -69,8 +71,8 @@ ...@@ -69,8 +71,8 @@
</div> </div>
<div class="col-1 menu-toggler"> <div class="col-1 menu-toggler">
<div class="toggler-icon"> <div class="toggler-icon">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32" width="32" <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32"
xmlns="http://www.w3.org/2000/svg"> width="32" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path> <path fill="none" d="M0 0h24v24H0z"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg> </svg>
...@@ -79,3 +81,5 @@ ...@@ -79,3 +81,5 @@
</div> </div>
</div> </div>
</nav> </nav>
<div class="header-placeholder"></div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment