We Keep Coding

SweetAlert Icon overflow-y

I have an issue modifying my website. When I call Swal.fire(...), something like this happens:
Icon on the picture overflows and not renders properly(seems like scrollbar affects on icon render). How can I fix this? Thanks
Here is my custom css code:
* {
margin: 0px;
padding: 0px;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
color: white;
user-select: none;
font-size: 20px;
}
h1 {
font-size: 60px;
}
body {
z-index: -2;
background-color: black;
}
#canvas1 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background: black;
}
.header {
text-align: center;
height: 100vh;
}
.header-title {
font-size: 70px;
font-weight: bold;
margin-top: 40vh;
}
section {
padding: 20vh;
}
.section-title {
font-size: 60px;
}
.section-text {
font-size: 25px;
}
footer {
height: 30vh;
background-color: rgb(24, 24, 24);
}
.navbar {
font-size: 40px;
position: fixed;
list-style-type: none;
overflow: hidden;
}
.navbar > li {
float: left;
}
.navbar > li a {
transition: .3s;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar > li a:hover {
background-color: rgba(255, 255, 255, 0.671);
}
input {
background-color: black;
margin: 20px;
}
.account-creator {
margin: auto;
width: 50%;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin-top: 30vh;
padding: 10vh;
}
.account-creator {
margin-bottom: 100px;
}
.small-title {
font-size: 40px;
}
button {
background-color: black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 35px;
overflow-y: hidden;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
top: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #f3214f;
}
input:focus + .slider {
box-shadow: 0 0 1px #f3214f;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.input_description{
font-size: 30px;
}
.simple-button {
background-color: #f3214f;
padding: 10px;
border-radius: 5px;
border: none;
transition: .4s;
margin: 30px;
}
.simple-button:hover {
transform: scale(1.2);
box-shadow: 0px 0px 10px #f3214faf;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background-color: white;
background-image: none;
border-radius: 20px;
}
.clauses-field{
border: 3px solid white;
border-radius: 10px;
max-height: 300px;
position: absolute;
overflow-y: scroll;
margin-left: 40vw;
padding: 30px;
}
Idk maybe this code ruins everything, but it will be good if I don't need to change anything in here cause my website could just crash

For some resone you icon is overflowing so that orange line is scrollbar
add .sa-icon.sa-success { overflow:hidden }
this code in your css . if this dosent work , just inspect success icon and copy its class and add overflow:hidden to that.
if you still cant do it just copy popup code and add to your question , i will give you working code.

what's wrong on code javascript with list item menu?

I use This code on my dropdown list Item on click.. it's working Good . but Problem is .. when I click in link not working..
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
An example from here ==> https://codepen.io/0fercpkzi/full/jOMqXgV

Remove e.preventDefault inside showSubMenu, or, perform a check to see if it's an a tag being clicked:
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el) {
el.addEventListener('click', onClick, false);
});
function onClick(e) {
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el) {
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e) {
// Return if target is an anchor tag
if (e.target.localName === 'a') return;
e.preventDefault();
if (el.contains(e.target)) {
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el) {
el.classList.remove('show-submenu');
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #f00;
}
.nav {
width: 550px;
margin: 100px auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position: absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, .1);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item dropdown">
<span>Drop Down</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Google</li>
<li class="submenu-item">Yuotube</li>
<li class="submenu-item">Facebook</li>
</ul>
</nav>
</li>
</ul>
</nav>

How to make mobile responsive vertical range slider

I have done a range slider position into vertical. but it's not responsive. I'm checked in chrome default mobile devices. when adjusting the range slider it will scroll the page
I have added my code here.
.slido{
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
-webkit-transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<input type="range" class="slido" min="1" max="100" step="1">

Using just transform on an element does not affect the size or position of its parent or of any other elements, at all. There is absolutely no way to change this fact of how transform works. so adding the div on parent level (which can handle the overflow of rotation) is one solution.
code Updated:
.slido {
-webkit-appearance: none;
width: 100vh;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
transform: rotate(90deg);
}
.slido::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.rotation-wrapper-outer {
display: table;
}
.rotation-wrapper-inner {
padding: 50% 0;
height: 0;
}
.element-to-rotate {
display: block;
transform-origin: top left;
/* Note: for a CLOCKWISE rotation, use the commented-out
transform instead of this one. */
transform: rotate(-90deg) translate(-100%);
/* transform: rotate(90deg) translate(0, -100%); */
margin-top: -50%;
/* Not vital, but possibly a good idea if the element you're rotating contains
text and you want a single long vertical line of text and the pre-rotation
width of your element is small enough that the text wraps: */
white-space: nowrap;
}
<div id="container">
<div class="rotation-wrapper-outer">
<div class="rotation-wrapper-inner">
<input type="range" class="slido" min="1" max="100" step="1">
</div>
</div>
</div>

You have transform the horizontal slider in to vertical which won't work so you can use vertical slider only check snippet.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight/2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #3D3D4A;
color: white;
font-family: sans-serif;
}
.info {
position: absolute;
top: 0;
left: 0;
padding: 10px;
opacity: 0.5;
}
.container {
position: relative;
display: inline-block;
padding-top: 40px;
}
.range-slider {
display: inline-block;
width: 40px;
position: relative;
text-align: center;
max-height: 100%;
}
.range-slider:before {
position: absolute;
top: -2em;
left: 0.5em;
content: attr(data-slider-value) '%';
color: white;
font-size: 90%;
}
.range-slider__thumb {
position: absolute;
left: 5px;
width: 30px;
height: 30px;
line-height: 30px;
background: white;
color: #777;
font-size: 50%;
box-shadow: 0 0 0 4px #3D3D4A;
border-radius: 50%;
pointer-events: none;
}
.range-slider__bar {
left: 16px;
bottom: 0;
position: absolute;
background: linear-gradient(dodgerblue, blue);
pointer-events: none;
width: 8px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: calc(100vh - 50px);
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower,
.range-slider input[type=range][orient=vertical]::-ms-fill-upper,
.range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="range-slider">
<input type="range" orient="vertical" min="0" max="100" />
<div class="range-slider__bar"></div>
<div class="range-slider__thumb"></div>
</div>
</div>

Highlight menu item on scroll

We have a website. It has navigation section with some menu. It is a single page application.
The requirement is if we are in the home, or in any other section, it should highlight the respective menu. It should do so on scrolling to the required section.
In this sample website i'm going highlight menu item during smooth scroll. I have tried $('body').scrollspy({ target: '#menu' }) this one but couldn't help me
*/
(function ($) {
'use strict';
jQuery(document).ready(function () {
/* Preloader */
$(window).load(function () {
$('.preloader').delay(800).fadeOut('slow');
});
/* Smooth Scroll */
$('a.smoth-scroll').on("click", function (e) {
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top - 50
}, 1000);
e.preventDefault();
});
$('body').scrollspy({ target: '#menu' })
/* Scroll Naviagation Background Change with Sticky Navigation */
$(window).on('scroll', function () {
if ($(window).scrollTop() > 100) {
$('.header-top-area').addClass('navigation-background');
} else {
$('.header-top-area').removeClass('navigation-background');
}
});
/* Mobile Navigation Hide or Collapse on Click */
$(document).on('click', '.navbar-collapse.in', function (e) {
if ($(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle') {
$(this).collapse('hide');
}
});
$('body').scrollspy({
target: '.navbar-collapse',
offset: 195
});
/* Scroll To Top */
$(window).scroll(function(){
if ($(this).scrollTop() >= 500) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
$('.scroll-to-top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
/* Tooltip */
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
/* Ajaxchimp for Subscribe Form */
$('#mc-form').ajaxChimp();
/* Global Style */
body {
font-size: 12px;
font-weight: 400;
line-height: 24px;
letter-spacing: 1px;
height: 100%;
font-family: 'Poppins', sans-serif;
}
html,
body {
height: 100%
}
::selection {
background-color: #f7639a;
color: #ffffff;
}
::-moz-selection {
background-color: #f7639a;
color: #ffffff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
a {
color: #4c9cef;
}
a:hover,
a:active{
background: pink;
}
a:focus {
/*color: #f7639a;
text-decoration: none;
outline: none;*/
}
p {
line-height: 28px;
}
b {
font-weight: 600;
}
ul,
li {
margin: 0;
padding: 0;
}
fieldset {
border: 0 none;
margin: 0 auto;
padding: 0;
}
.no-padding {
padding: 0
}
.pink-color {
color: #f7639a !important;
}
.pink-color-bg {
background-color: #f7639a !important;
}
.section-space-padding {
padding: 100px 0px;
}
.section-title {
text-align: center;
}
.section-title h2 {
margin-top: 0;
font-weight: 600;
font-size: 30px;
}
.section-title p {
font-weight: 400;
line-height: 25px;
margin-bottom: 40px;
}
.bg-cover {
background-repeat: no-repeat;
}
.pattern-bg {
background: url(../images/bg/pattern-bg.png);
background-repeat: repeat;
}
.grabbing {
cursor: url(../images/owl-carousel/grabbing.png) 8 8, move;
}
.divider > i {
color: #f7639a;
font-size: 21px;
}
.divider {
position: relative;
width: 126px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.divider:after,
.divider:before {
content: ' ';
width: 43px;
position: absolute;
border-bottom: dotted 2px #ffffff;
top: 50%;
margin-top: -4px;
}
.divider:before {
left: 0;
}
.divider:after {
right: 0;
}
.divider.dark:after,
.divider.dark:before {
border-color: #b2b2b2;
}
.button {
border: none;
border-radius: 5px;
font-family: inherit;
font-size: 17px;
color: inherit;
background: none;
cursor: pointer;
padding: 20px 60px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.button:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.button-style {
border: 3px solid #fff;
color: #fff;
}
.button-style:hover,
.button-style:active,
.button-style:focus {
color: #ffffff;
background: #4c9cef;
}
.button-style-color-2:hover,
.button-style-color-2:active,
.button-style-color-2:focus {
color: #ffffff;
background: #f7639a !important;
}
.button-style-dark {
border: 3px solid #000000;
color: #000000;
}
/* Preloader */
.preloader {
background: #F9F9F9;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.preloader p {
position: absolute;
top: 48%;
left: 50%;
text-align: center;
font-size: 20px;
color: #333333;
}
.preloader:before, .preloader:after {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 40%;
left: 40%;
background-color: #4c9cef;
animation: squaremove 1s ease-in-out infinite;
-webkit-animation: squaremove 1s ease-in-out infinite;
}
.preloader:after {
bottom: 0px;
background-color: #f7639a;
animation-delay: 0.3s;
}
#keyframes squaremove {
0%, 100%{
-webkit-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0);
}
25%{
-webkit-transform: translate(40px,40px) rotate(45deg);
-ms-transform: translate(40px,40px) rotate(45deg);
-o-transform: translate(40px,40px) rotate(45deg);
transform: translate(40px,40px) rotate(45deg);
}
50%{
-webkit-transform: translate(0px,80px) rotate(0deg);
-ms-transform: translate(0px,80px) rotate(0deg);
-o-transform: translate(0px,80px) rotate(0deg);
transform: translate(0px,80px) rotate(0deg);
}
75%{
-webkit-transform: translate(-40px,40px) rotate(45deg);
-ms-transform: translate(-40px,40px) rotate(45deg);
-o-transform: translate(-40px,40px) rotate(45deg);
transform: translate(-40px,40px) rotate(45deg);
}
}
/* Home Section and Navigation Menu */
.home-section {
background: #f1f1f1;
padding-top: 60px;
}
.table {
margin-bottom: 0px;
}
.table a {
color: #ffffff;
}
.table > tbody > tr > td {
padding: 15px;
border: 3px solid #e4e4e4;
}
.table tr > td {
padding: 11px 13px;
}
tr:nth-child(1) > td {
border-top:0px;
}
tr > td:nth-child(1){
background-color: #ffffff;
font-weight: 500;
font-size: 13px;
color: #888888;
width: 140px;
}
tr > td:nth-child(2) {
font-weight: 500;
color: #ffffff;
background: #4c9cef;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.logo {
padding-top: 28px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo a {
display: block;
color: #333333;
letter-spacing: 6px;
font-weight: 600;
font-size: 14px;
border-bottom: 4px solid #f7639a;
width: 92px;
}
.navigation-menu .navbar-nav li a {
color: #333333;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
padding: 30px 15px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 600;
}
.navigation-menu .navbar-nav li a:hover {
background: none;
color: #f7639a;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.nav li a:focus,
.nav li a:hover {
background: none;
color: #4c9cef;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
.navigation-background {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: #4c9cef;
}
.navigation-background .logo {
padding-top: 18px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navigation-background .logo a {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a {
color: #fff;
padding: 20px 15px;
-webkit-transition: .3s;
transition: .3s;
}
.navigation-background .navigation-menu .navbar-nav li a:hover {
color: #fff;
}
/* Scroll To Top */
.scroll-to-top {
background-color: #4c9cef;
display: none;
width: 60px;
height: 60px;
font-size: 25px;
border-radius: 100%;
line-height: 67px;
text-align: center;
color: #fff;
position: fixed;
right: 20px;
bottom: 30px;
z-index: 999;
box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
transition: all 0.3s ease-in-out;
}
.scroll-to-top:hover,
.scroll-to-top:focus {
background-color: #f7639a;
color: #ffffff;
box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
}
/* Responsive */
#media only screen and (max-width: 1199px) {
.experience-circle i {
font-size: 30px;
}
.experience-content{
margin-left: 75px;
}
.experience-content:after,
.experience-content:before {
top: 30%;
}
}
#media only screen and (min-width: 767px) and (max-width: 991px) {
.navigation-menu .navbar-nav li a {
padding: 30px 11px;
font-size: 12px;
}
.navigation-background .navigation-menu .navbar-nav li a {
padding: 30px 11px;
font-size: 12px;
}
.navigation-background .logo {
padding-top: 28px;
}
.margin-left-setting {
margin-left: 0px !important;
}
}
#media only screen and (max-width: 991px) {
.call-to-action h2 {
font-size: 20px;
}
}
#media only screen and (max-width: 767px) {
.navbar-toggle .icon-bar {
background: #f7639a;
}
.navigation-background .navbar-toggle .icon-bar {
background: #ffffff;
}
.navbar-toggle {
margin-right: 0px;
margin-top: -30px;
}
.navbar {
min-height: 0px;
}
.navigation-menu .navbar-nav li a {
padding: 11px 15px;
color: #ffffff;
}
.navigation-menu .navbar-nav li a:hover {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a:hover {
color: #ffffff;
}
.navigation-background .navigation-menu .navbar-nav li a {
padding: 11px 15px;
}
.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
max-height: 420px;
}
.navbar-toggle {
margin-top: -30px;
}
.navbar-collapse {
background: #4c9cef;
}
.navigation-background .navbar-collapse {
background: #4c9cef;
}
.section-title h2 {
font-size: 22px;
}
.testimonial-word {
padding: 0;
}
.testimonial-carousel-list {
margin-top: 0px;
}
.call-to-action h2 {
font-size: 18px;
line-height: 35px;
}
.contact-us-detail {
left: 39%;
}
.owl-prev {
left: 5px;
}
.owl-next {
right: 5px;
}
.scroll-to-top {
width: 45px !important;
height: 45px !important;
font-size: 20px !important;
line-height: 52px !important;
right: 8px !important;
bottom: 15px !important;
}
}
#media only screen and (max-width: 555px) {
.social-icon li a {
width: 40px;
height: 40px;
line-height: 44px;
font-size: 16px;
}
.section-title h2 {
font-size: 16px;
font-weight: 500;
}
.section-title p {
font-weight: 300;
font-size: 12px;
}
.statistics-content > h5 {
font-size: 20px;
}
.statistics-content > span {
font-size: 10px;
}
.statistics-icon {
font-size: 30px;
}
.services-section hr {
width: 35px;
}
.services-section h3 {
font-size: 12px;
}
.services-section .services-detail {
width: 180px;
height: 180px;
}
.services-section .services-detail i {
font-size: 30px;
margin-top: 45px;
}
.owl-theme .owl-controls .owl-buttons div {
padding: 6px 10px;
width: 40px;
height: 40px;
line-height: 36px;
font-size: 8px;
}
.contact-us-detail {
left: 30%;
}
}
#media only screen and (max-width: 500px) {
.experience {
margin-left: 0px;
border: 0px;
}
.experience-circle {
margin: 0 auto;
position: static;
margin-bottom: 20px;
}
.experience-content {
padding: 10px 15px;
margin-left: 0px;
text-align: center;
}
.experience-content:after,
.experience-content:before {
display: none;
}
}
#media only screen and (max-width: 449px) {
.button {
font-size: 13px;
padding: 14px 28px;
font-weight: 600;
}
.contact-us-detail {
left: 25%;
}
}
/* Useful Classes */
/* Spacing ( with Margin and Padding ) */
/* Margin */
.margin-0 {
margin: 0px !important;
}
/* Margin Top */
.margin-top-0 {
margin-top: 0px !important;
}
.margin-top-10 {
margin-top: 10px !important;
}
.margin-top-20 {
margin-top: 20px !important;
}
.margin-top-30 {
margin-top: 30px !important;
}
.margin-top-40 {
margin-top: 40px !important;
}
.margin-top-50 {
margin-top: 50px !important;
}
.margin-top-60 {
margin-top: 60px !important;
}
.margin-top-70 {
margin-top: 70px !important;
}
.margin-top-80 {
margin-top: 80px !important;
}
.margin-top-90 {
margin-top: 90px !important;
}
.margin-top-100 {
margin-top: 100px !important;
}
.margin-top-120 {
margin-top: 120px !important;
}
.margin-top-150 {
margin-top: 150px !important;
}
.margin-top-200 {
margin-top: 200px !important;
}
/* Margin Bottom */
.margin-bottom-0 {
margin-bottom: 0px !important;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
}
.margin-bottom-20 {
margin-bottom: 20px !important;
}
.margin-bottom-30 {
margin-bottom: 30px !important;
}
.margin-bottom-40 {
margin-bottom: 40px !important;
}
.margin-bottom-50 {
margin-bottom: 50px !important;
}
.margin-bottom-60 {
margin-bottom: 60px !important;
}
.margin-bottom-70 {
margin-bottom: 70px !important;
}
.margin-bottom-80 {
margin-bottom: 80px !important;
}
.margin-bottom-90 {
margin-bottom: 90px !important;
}
.margin-bottom-100 {
margin-bottom: 100px !important;
}
.margin-bottom-120 {
margin-bottom: 120px !important;
}
.margin-bottom-150 {
margin-bottom: 150px !important;
}
.margin-bottom-200 {
margin-bottom: 200px !important;
}
/* Padding */
.padding-0 {
padding: 0px !important;
}
/* Padding Top */
.padding-top-0 {
padding-top: 0px !important;
}
.padding-top-10 {
padding-top: 10px !important;
}
.padding-top-20 {
padding-top: 20px !important;
}
.padding-top-30 {
padding-top: 30px !important;
}
.padding-top-40 {
padding-top: 40px !important;
}
.padding-top-50 {
padding-top: 50px !important;
}
.padding-top-60 {
padding-top: 60px !important;
}
.padding-top-70 {
padding-top: 70px !important;
}
.padding-top-80 {
padding-top: 80px !important;
}
.padding-top-90 {
padding-top: 90px !important;
}
.padding-top-100 {
padding-top: 100px !important;
}
.padding-top-120 {
padding-top: 120px !important;
}
.padding-top-150 {
padding-top: 150px !important;
}
.padding-top-200 {
padding-top: 200px !important;
}
/* Padding Bottom */
.padding-bottom-0 {
padding-bottom: 0px !important;
}
.padding-bottom-10 {
padding-bottom: 10px !important;
}
.padding-bottom-20 {
padding-bottom: 20px !important;
}
.padding-bottom-30 {
padding-bottom: 30px !important;
}
.padding-bottom-40 {
padding-bottom: 40px !important;
}
.padding-bottom-50 {
padding-bottom: 50px !important;
}
.padding-bottom-60 {
padding-bottom: 60px !important;
}
.padding-bottom-70 {
padding-bottom: 70px !important;
}
.padding-bottom-80 {
padding-bottom: 80px !important;
}
.padding-bottom-90 {
padding-bottom: 90px !important;
}
.padding-bottom-100 {
padding-bottom: 100px !important;
}
.padding-bottom-120 {
padding-bottom: 120px !important;
}
.padding-bottom-150 {
padding-bottom: 150px !important;
}
.padding-bottom-200 {
padding-bottom: 200px !important;
}
/* Colors */
.color-1 {
color: #f306a0;
}
.color-2 {
color: #d60bfb;
}
.color-3 {
color: #d8be10;
}
.color-4 {
color: #0fd28a;
}
.color-5 {
color: #f97400;
}
.color-6 {
color: #08a6f3;
}
/* Background Color */
.bg-color-1 {
background-color: #f306a0;
}
.bg-color-2 {
background-color: #d60bfb;
}
.bg-color-3 {
background-color: #d8be10;
}
.bg-color-4 {
background-color: #0fd28a;
}
.bg-color-5 {
background-color: #f97400;
}
.bg-color-6 {
background-color: #08a6f3;
}
/* Tooltip Styles */
.tooltip-inner {
font-style: italic;
padding: 10px 12px;
min-width: 150px;
width: 100%;
}
.tooltip.top {
margin-top:-15px;
}
.tooltip.bottom {
margin-top:15px;
bottom: auto;
left: auto;
right: auto;
}
.tooltip.left {
margin-right:15px;
}
.tooltip.right {
margin-left:15px;
}
.tooltip-color .tooltip-inner {
color: #fff;
}
/* UiPasta Credit */
.uipasta-credit {
color: #333333;
text-align: center;
}
.uipasta-credit a {
color: #4c9cef;
font-weight: 600;
}
.uipasta-credit a:hover {
color: #f7639a;
}
<div class="header-top-area">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="logo">
WebRes
</div>
</div>
<div class="col-sm-9">
<div class="navigation-menu">
<div class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="menu" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="smoth-scroll" href="#home">Home <div class="ripple-wrapper"></div></a>
</li>
<li><a class="smoth-scroll" href="#about">About</a>
</li>
<li><a class="smoth-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="smoth-scroll" href="#testimonials">Testimonial</a>
</li>
<li><a class="smoth-scroll" href="#services">services</a>
</li>
<li><a class="smoth-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the image of sample where I need to highlight menu during scroll

For every page you have, assign a variable for example in your Home.php
at the top of the page
<?php $page = "home" ?>
then in your navigation/toolbar
<li class=" <?php if($page == "home"){echo "active";}?> "> Home </li>
and in your css file you can customize whatever style you want with the active

Nouislider slider is not working in react

I using the below code to intialise the nouilslider-react. But it's css is not being loaded. What should I do?
I have imported the react-nouislider. Functionalities are working fine. But I am seeing the sliders as text like below
<SliderInput
range={{min: 0, max: 200}}
start={[0, 100]}
tooltips
/>
Thank you in advance

u have to add some style on that slider
try this example style.css code below (from https://codepen.io/mshwery/pen/CBslE)
body {
text-align: center;
padding: 20px;
}
.no-ui-slider {
width: 100%;
max-width: 500px;
margin: 50px auto;
}
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7, which incorrectly
creates a new context for the origins. */
*z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
width: 20px;
height: 20px;
left: -10px;
top: -7px;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin {
right: -15px;
}
/* Styling;
*/
.noUi-background {
background: #3182bd;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
.noUi-origin {
border-radius: 2px;
background: #eee;
}
.noUi-target {
border-radius: 2px;
}
.noUi-target.noUi-connect {
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}
/* Handles and cursors;
*/
.noUi-dragable {
cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
cursor: n-resize;
}
.noUi-handle {
border-radius: 2px 2px 0 0;
background: #fff;
cursor: default;
box-shadow: 0 0px 1px rgba(0,0,0,0.5);
}
.noUi-active {
}
/* Handle stripes;
*/
.noUi-handle:after {
content: "";
display: block;
position: absolute;
left: 0px;
top: 100%;
border-top: 11px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.noUi-handle:before {
content: "";
display: block;
position: absolute;
left: -0px;
top: 100%;
margin-top: 1px;
border-top: 11px solid rgba(0,0,0,0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled] .noUi-handle {
cursor: not-allowed;
}