CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
raimond
raimond

Reputation: 89

How to apply transition effect to a Bootstrap 3 navbar brand image?

I am using a collapse to collapse my navigation bar upon scrolling. When the navbar collapses, I need to resize my brand logo so it fits properly after the navbar is resized. I am trying to apply a smooth transition effect to the logo when it changes padding and min. size.

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
        $(".navbar-left>img").addClass ("top-nav-collapse-logo");
        $(".navbar-brand").addClass ("navbar-brand-modified");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
        $(".navbar-left>img").removeClass ("top-nav-collapse-logo");
        $(".navbar-brand").removeClass ("navbar-brand-modified");
    }
});
/*!
 * Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
    height: 100%;
    width: 100%;
}

html {
    height: 100%;
    width: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

    .top-nav-collapse-logo {
        padding-top: 6px;
        min-width: 35px !important;
        -webkit-transition: padding-top: 0.1s ease;
        -moz-transition: padding-top: 0.1s ease;
        transition: padding-top: 0.1s ease;
    }

    .navbar-brand-modified {
        padding: 17px 5px 5px 25px !important;
    }
}


.navbar-left>img {
  min-width: 40px;

}

.cleaningservices p {
	text-align: left;
}

.navbar-brand {
	padding-left: 25px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
		<header>
			<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #CFE4F1">
			  <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" aria-expanded="false">
			        <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-left" href="#home"><img alt="Brand" src="/images/logo.svg"><a href="#home" class="navbar-brand">A Company</a></a>
			      <div class="supermaid-logo"></div>
			    </div>

P.S. Sorry if I didn't do the snippet correctly, I don't know how to make navbar collapse in the snippet. Anyway here's a gif of what's happening: https://gyazo.com/99ccbdbba530974e89ef9ae484a15a79

The logo + brand name just change the padding and size, I want them to smoothly transition between the padding difference and size.

Upvotes: 0

Views: 859

Answers (1)

Banzay
Banzay

Reputation: 9470

IT seems there is a typo in css rules:

.top-nav-collapse-logo {
        padding-top: 6px;
        min-width: 35px !important;
        -webkit-transition: padding-top: 0.1s ease;
        -moz-transition: padding-top: 0.1s ease;
        transition: padding-top: 0.1s ease;
    }

You need to remove : after padding-top

Upvotes: 0

Related Questions