CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapcss
J Torbik
J Torbik

Reputation: 31

Change logo on scroll Bootstrap 3

My question is how to change logo when page scrolls. I've did research on Stack Overflow and couldn't find a solution. None of the codes brought errors I just couldn't get them to work.

Below is the coding of my website HTML, CSS, and JavaScript of what I'm trying to fix. My HTML follows:

<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top"><div class="pull-left"><img class="top-logo" src="img/jtorbiklogo1.png"></a></div>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right navbar-custom">
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#web">Web Design</a>
                </li>
                <li>
                    <a class="page-scroll" href="#graphic">Graphic Design</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

The CSS for this code is boostrap.min.css and my own custom CSS:

@media (min-width: 992px) {
.top-logo {
width: 600px;
height: 100%;
max-height:132px;
min-height:132px;
margin-top: -58px;
margin-left: -180px;
}

The reason it's under my 992px width is that I only want this to happen for any device over 992. Also I have different logo sizes as page shrinks. I want to add JavaScript to change the logo in the navbar once the page scrolls. I found a JavaScript code that I think would work but needs to be tweaked. 

$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $('#custom-nav').addClass('affix');
    $(".navbar-fixed-top").addClass("top-nav-collapse");
    $('.navbar-brand img').attr('src','newImage.jpg'); //change src
} else {
    $('#custom-nav').removeClass('affix');
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $('.navbar-brand img').attr('src','OldImage.jpg')
}   
});

Upvotes: 2

Views: 3226

Answers (1)

J Torbik
J Torbik

Reputation: 31

I want to say thank you to @DanKreiger & @katniss.everbean for there help. I've gotten it to work by following steps katniss given me. The problem was my jquery link was at bottom and this was causing a define problem which caused the script to not respond. I'm new to Stack Overflow. I don't know if I can give points yet. I'll mark as solved and yet again, thank you both for your help!

Upvotes: 1

Related Questions