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 @@
// });
// });
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 () {
$(".modal-dialog").addClass("addCss");
......@@ -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
$(function () {
let lastScrollTop = 0;
$(window).scroll(function () {
if ($(this).scrollTop() >= 200) {
$("#return-to-top").show(200);
let currentScrollTop = $(this).scrollTop();
// Only show if scrolling up and scrolled at least 200px
if (currentScrollTop < lastScrollTop && currentScrollTop >= 200) {
$("#return-to-top").fadeIn(200);
} else {
$("#return-to-top").hide(200);
$("#return-to-top").fadeOut(200);
}
lastScrollTop = currentScrollTop;
});
$("#return-to-top").click(function () {
$("body,html").animate({ scrollTop: 0 }, 1000);
$("html, body").animate({ scrollTop: 0 }, 1000);
});
})
//thankyou message for comment in blog-detail
$("#submitBtn").click(function () {
......
dev/sass/base/_base.scss
......@@ -40,6 +40,7 @@ body {
font-family: $body-font;
position: relative;
overflow-x: hidden;
&.no-scroll {
overflow: hidden !important;
}
......@@ -93,6 +94,7 @@ p {
font-size: 1.125rem;
color: #58595a;
letter-spacing: -0.5px;
@media (max-width: 991px) {
letter-spacing: 0;
}
......@@ -647,11 +649,14 @@ ul {
}
// 9: Return to Top Start
#return-to-top {
.fixed-button-wrapper {
position: fixed;
z-index: 99;
bottom: 20px;
right: 2%;
}
#return-to-top {
background: $primary;
width: 50px;
height: 50px;
......@@ -699,7 +704,7 @@ ul {
}
.text-content {
& > span {
&>span {
font-size: 1.25rem;
color: #000000;
letter-spacing: 0.28em;
......@@ -1122,6 +1127,7 @@ ul {
}
.text-wrapper {
h1,
h2,
h3,
......@@ -1365,6 +1371,7 @@ ul {
display: flex !important;
.job-list {
h1,
h2,
h3,
......@@ -1409,12 +1416,15 @@ ul {
.breadcrumb-background-dark {
padding-bottom: 0;
padding-top: 4.5rem !important;
&.background-dark {
background: #005aff !important;
}
&.breadcrumb-background-dark {
padding-bottom: 2.5rem !important;
}
ol,
ul {
margin: 0;
......@@ -1426,7 +1436,7 @@ ul {
}
}
.breadcrumb-item + .breadcrumb-item {
.breadcrumb-item+.breadcrumb-item {
&::before {
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");
......@@ -1442,6 +1452,7 @@ ul {
.vacancy-detail-breadcrumb {
padding-top: 4.5rem !important;
background: #121526 !important;
ol,
ul {
margin: 0;
......@@ -1453,7 +1464,7 @@ ul {
}
}
.breadcrumb-item + .breadcrumb-item {
.breadcrumb-item+.breadcrumb-item {
&::before {
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");
......@@ -1471,11 +1482,13 @@ ul {
.col-lg-9 {
padding-left: 0.8125rem;
}
.terms-sidebar-wrapper {
position: sticky;
top: 20%;
margin-right: 2.5rem;
padding-bottom: 1.875rem;
ul {
margin: 0;
list-style-type: none;
......@@ -1569,6 +1582,7 @@ ul {
//YOU-MAY-LIKE
.YOU-MAY-LIKE {
.main-wrapper .top-title-wrapper p,
span {
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 {
width: 100%;
background-color: $white;
......@@ -7,11 +17,17 @@
left: 0;
z-index: 111;
transition: 0.4s ease-in-out;
position: absolute;
top: 0;
@media (max-width: 1030px) {
.navbar-nav {
flex-direction: column !important;
}
}
.side-menu-close {
@media (max-width: 1030px) {
display: block !important;
......@@ -117,6 +133,7 @@
@media (max-width: 1030px) {
margin-right: 0;
&:not(:last-child) {
margin-bottom: 1.875rem;
}
......@@ -181,7 +198,7 @@
&.menu-item-has-children {
position: relative;
> a {
>a {
padding-right: 24px;
position: relative;
......@@ -199,11 +216,12 @@
&:hover,
&.show {
> ul {
>ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
a {
&::before {
transform: translateY(-50%) rotate(-90deg);
......@@ -231,6 +249,7 @@
left: 100%;
top: 0;
}
a {
display: block;
padding: 12px 36px 12px 24px;
......@@ -238,13 +257,15 @@
&::after {
content: unset;
}
&::before {
right: 24px;
}
}
&:hover,
&.active {
> a {
>a {
background-color: rgba(44, 92, 218, 20%);
}
}
......@@ -324,9 +345,12 @@
// brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards;
position: fixed;
// overflow: hidden;
@media (max-width: 1030px) {
animation: unset;
.navbar-nav {
flex-direction: column !important;
}
......@@ -414,6 +438,7 @@
li {
width: 100%;
a {
// padding-left: 0 !important;
color: $black !important;
......@@ -424,6 +449,7 @@
}
}
}
.top-nav {
.nav-wrapper {
.nav-right {
......@@ -443,6 +469,7 @@
padding-left: 12px;
// border-radius: 12px;
}
ul {
padding-left: 12px;
}
......@@ -451,7 +478,7 @@
&:hover,
&.show {
> ul {
>ul {
display: block;
}
}
......
dev/sass/pages/_index.scss
......@@ -17,9 +17,9 @@
}
.whats-app-icon-wrapper {
position: fixed;
bottom: 80px;
right: 2%;
// position: fixed;
// bottom: 80px;
// right: 2%;
max-width: 51px;
// padding: 10px;
border-radius: 5px;
......@@ -40,7 +40,8 @@
}
.whats-app-icon-wrapper .tooltip-wrapper {
top: 23%;
top: 50%;
transform: translateY(-50%);
left: -8rem;
background-color: #34c759;
border-radius: 8px;
......
footer.php
......@@ -332,14 +332,15 @@
</div>
</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"
stroke-linejoin="round" class="css-i6dzq1">
<div class="fixed-button-wrapper">
<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>
</svg>
</a>
<div class="whats-app-icon-wrapper">
</a>
<div class="whats-app-icon-wrapper position-relative">
<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">
<path
......@@ -353,6 +354,7 @@
<div class="position-absolute tooltip-wrapper">
<p>Chat with us</p>
</div>
</div>
</div>
<div class="download-popup">
......
header.php
......@@ -59,9 +59,11 @@
<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
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"
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>
<span class="bg-hover" style="left: 108px; top: 62.1562px;"></span>
</a>
......@@ -69,8 +71,8 @@
</div>
<div class="col-1 menu-toggler">
<div class="toggler-icon">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32" width="32"
xmlns="http://www.w3.org/2000/svg">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32"
width="32" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
......@@ -79,3 +81,5 @@
</div>
</div>
</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