CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
jissylarry
jissylarry

Reputation: 61

Fix navbar elements size when navbar shrinks

I have a fixed-top navbar, i made a function to make it shrink on scroll but i have a problem, the ul class in the navbar is not shrinking properly, i gave it a line height to align it vertically with the navbar-brand but i can't figure out how to fix that when the navbar shrinks, here is my code: 

$(document).ready(function(){
  var scrollTop = 0;
  $(window).scroll(function(){
    scrollTop = $(window).scrollTop();
     $('.counter').html(scrollTop);
    
    if (scrollTop >= 100) {
      $('#global-nav').addClass('scrolled-nav');
    } else if (scrollTop < 100) {
      $('#global-nav').removeClass('scrolled-nav');
    } 
    
  }); 
  
});
#global-nav{
height: 150px;
  -webkit-transition: height .5s, line-height .5s;
  transition: height .5s, line-height .5s;
}

.navbar-brand img{
height:95px;
}

.navbar-default .navbar-nav>li>a{
   line-height: 95px;
   }
   
   .navbar-brand
  img{
   display: inline-block;
   -webkit-transition: all .5s;
   transition: all .5s;
}
.scrolled-nav .navbar-brand img{
  height: 50px;
}
.scrolled-nav{
  height: 100px !important;
  line-height: 100px !important;
}
.counter{
  width: 20px;
  height: 20px;
  background: black;
  color: #fff;
  position: fixed;
  top: 120px;
  right: 0;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav id="global-nav" class="navbar navbar-default navbar-custom navbar-fixed-top">
   <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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 page-scroll" href="#page-top"><img src="http://placehold.it/350x150"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#"></a>
                    </li>
                    <li class="active"> <a href="#">LINK 1</a> </li>
                    <li> <a href="#">LINK 2</a> </li>
            
                </ul>
            </div>
        </div>
 </nav>
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Upvotes: 1

Views: 939

Answers (2)

amflare
amflare

Reputation: 4113

Your issue is

.navbar-default .navbar-nav>li>a {
  line-height: 95px;
}

You need that to be 70px when small to account for the padding (or remove the padding when small).

Simple answer:

.navbar-default.scrolled-nav .navbar-nav>li>a {
  line-height: 70px;
}

Upvotes: 1

Toby
Toby

Reputation: 13395

This is tricky to replicate using code snippets, but the CSS that is controlling the height of the nav items is this:

.navbar-default .navbar-nav>li>a {
    line-height: 95px;
}

Because this code uses line-height to center the text in the nav buttons, this is the property you'll need to adjust the shrink their height.

Alternatively, you can separate line height from the shrinking nav and use padding-top and padding-bottom, and adjust these properties when the scrolled class is added.

Upvotes: 0

Related Questions