title: How to animate text size without affecting navbar height?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      @Scripts.Render("~/bundles/jquery")
      &lt;style&gt;
          .navbar-brand 
          {
              float:none;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(function () {
              $("a.navbar-brand &gt; div.text-center").mouseenter(function () {
                  $(this).animate({
                      fontSize: "1.05em"
                  }, 300);
              }).mouseleave(function () {
                  $(this).animate({
                      fontSize: "0.95em"
                  }, 300);
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;a class="navbar-brand" href="~/Home/Index"&gt;
  
              &lt;div class="text-center"&gt;
                  &lt;span class="glyphicon glyphicon-info-sign top"&gt;&lt;/span&gt;
                      &lt;b&gt;Viswaprani Healing Center's Home Page&lt;/b&gt;
             &lt;/div&gt;
          &lt;/a&gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
              &lt;/ul&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
      @RenderBody()
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When enter the mouse and and leave it from this title Viswaprani Healing Center's Home Page same time navbar height changes. How to stop it?. How to keep the navbar height constant?. Please help me.</p>