CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
SK_Baz
SK_Baz

Reputation: 33

How to change font color on scroll in bootstrap using Jquery?

i managed to change background color , but knowing specificity of bootstrap i am having hard time figuring out how to change font-color ( navbar-brand ) in navbar

Jquery:

$(window).scroll(function(){


if($(window).width()<= 750){

    $('nav').toggleClass('scroll', $(this).scrollTop() > 300);
}

else{
    $('nav').toggleClass('scroll', $(this).scrollTop() >600);
}

});

CSS:

.navbar-default{
background-color: transparent;
border:none;
transition: 0.2s;}

.navbar-default.scroll{
background: #0A090C;
transition: 0.2s;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-shadow: 0px 2px 15px 1px rgba(15,15,15,1);
-moz-box-shadow: 0px 2px 15px 1px rgba(15,15,15,1);
box-shadow: 0px 2px 15px 1px rgba(15,15,15,1);}

HTML :

<nav class="navbar navbar-default navbar-fixed-top ">


<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" class="anim_button">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Sandro Kekelia</a>
</div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current) 
      </span></a></li>
      <li><a href="#">Link</a></li>
    </ul>
 </div>

Thank you in advance

Upvotes: 3

Views: 932

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9358

Is this wat u want?

I added the follwing to ur css

.navbar-default.scroll .navbar-brand{ 
  color:red;
}

When you target nav-brand , target it using a custom class name on parent (in this case .scroll)

This will override the bootstrap CSS without using important

$(window).scroll(function() {


  if ($(window).width() <= 750) {

    $('nav').toggleClass('scroll', $(this).scrollTop() > 300);
  } else {
    $('nav').toggleClass('scroll', $(this).scrollTop() > 600);
  }
});
.navbar-default {
  background-color: transparent;
  border: none;
  transition: 0.2s;
}

.navbar-default.scroll {
  background: #0A090C;
  transition: 0.2s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: 0px 2px 15px 1px rgba(15, 15, 15, 1);
  -moz-box-shadow: 0px 2px 15px 1px rgba(15, 15, 15, 1);
  box-shadow: 0px 2px 15px 1px rgba(15, 15, 15, 1);
}

.navbar-default.scroll .navbar-brand {
  color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<nav class="navbar navbar-default navbar-fixed-top ">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" class="anim_button">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
    <a class="navbar-brand" href="#">Sandro Kekelia</a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current) 
      </span></a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>
<div style="height:1500px"></div>

Upvotes: 1

Related Questions