I have used bootstrap 4.3.1 navbar fixed-top and transparent and while scrolled down it changes to black. After refreshing the page, it becomes transparent again and needs to scroll again to make it back.
This is the same code I have been using for other sites, but suddenly I face this issue,
HTML
<nav class="navbar navbar-dark fixed-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="{{.Site.BaseURL}}">
<img src="/images/logo.png" class="img-fluid" style="height: 120px;" alt="Prabhat logo">
</a>
<button class="navbar-toggler" data-target="#my-nav" data-toggle="collapse" aria-controls="my-nav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="my-nav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about" aria-label="about section link">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repertoire" aria-label="Repertoire section link">Our Repertoire</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#training" aria-label="Training section link">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#harikatha" aria-label="Harikatha section link">Harikatha</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#costumes" aria-label="Costumes section link">Costumes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio" aria-label="Gallery section link">Gallery & Media </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#news" aria-label="News section link">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer" aria-label="Contact section link">Contact us</a>
</li>
</ul>
</div>
</div>
CSS
.navbar {
transition: padding 0.2s ease;
z-index: 999;
}
.navbar-nav .nav-link {
display: inline-block;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
font-size: 1.2rem;
text-align: right;
padding-right: 1rem;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-item:hover {
background-color: #0e3e6e;
color: #fff;
}
.dropdown-item {
color: rgb(22, 22, 22);
}
.affix {
transition: padding 0.2s linear;
background-color: #000;
}
.navbar-toggler {
color: #bca227;
border: 1px solid #bca227;
}
@media (max-width: 576px) {
.navbar-collapse {
background-color: #000;
}
}
and JS
<script>
// navbar change bg and shrink on scroll and animated on scroll
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('affix animated fadeInDown');
} else {
$('.navbar').removeClass('affix animated fadeInDown');
}
});
//hide navbar after click
$(".navbar-nav li a:not('.dropdown-toggle')").on('click', function () {
$('.navbar-collapse').collapse('hide');
});
</script>
what to be done to make it remain coloured even after refreshed in scrolled position?
Thanks for responding,
When I removed this part of code, it worked, I don't understand the link between swiper slider and navbar transparent on refresh issue,
<section id="news">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<style>
#news {
padding-top: 10rem;
}
.swiper-container {
width: 100%;
padding: 0rem 0rem 15rem;
}
.swiper-slide {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width: 700px;
height: 600px
}
.caption {
/* background-color: rgba(68, 68, 68, 0.5); */
margin-top: 38rem;
font-size: larger;
padding: 0rem 1rem;
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 50px;
}
@media(max-width:576px) {
.swiper-container {
padding: 0rem 0rem 15rem;
}
.swiper-slide {
max-width: 100%;
}
.caption {
/* background-color: rgba(68, 68, 68, 0.5); */
font-size: medium;
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 15px;
}
}
</style>
<div class="swiper-container">
<h1 class="text-center mb-5">latest news</h1>
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(/images/Sharath.jpg)">
<div class="caption text-center d-flex flex-column justify-content-center">
<h3>Uday Shankar Award</h3>
<p>Sharat has been bestowed the prestigious "Uday Shankar" award for excellence in choreography and
production making from AttenDance!
</p>
</div>
</div>
<div class="swiper-slide" style="background-image:url(/images/Rajyothsava_award.jpg)">
<div class="caption text-center d-flex flex-column justify-content-center">
<h3>Rajyothsava Award</h3>
<p>On 1st November 2019 at Ravindra Kalakshetra, Bangalore, Prabhat Arts International won the
second highest state honor - “The Rajyothsava award” for its contribution in the field of Art
and Culture!</p>
</div>
</div>
<div class="swiper-slide" style="background-image:url(/images/Rajyothsava_award1.jpg)">
<div class="caption text-center d-flex flex-column justify-content-center">
<h3>Rajyothsava Award</h3>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Initialize Swiper -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</section>
Its a Hugo site, so can't put in jsfiddle, here is the repo link repo