Full responsive Jumbotron header

I have a Wordpress site which utilizes Bootstrap 3 and a Jumbotron header. I have a parallax effect on the nav and background which work using skrollr.js.

I have it set at different sizes for media Query (768px). 40% height for screen sizes above 768px. 25% for screen sizes smaller.

Right now the Jumbotron 'jumps' to the different sizes when the screen changes. I would like it to change sizes gradually as the screen shrinks and stretches. I would typically use percentages to accomplish this, but when I put 'min height: 40%' the height of the jumbotron goes to 0.

header html

<div class="container-fluid">
<div class="jumbotron" data-0="background-position:0px -50px;" data-350="background-position:0px 100px;">   

<header id="skrollr-body">  
        <nav class="navbar navbar-custom" role="navigation" data-0="opacity: 1" data-50="opacity: 0">   
            <!-- Brand and toggle get grouped for better mobile display --> 
                <div class="navbar-header"> 

                <div class="navbar-brand">
                    <?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
                        <a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>"  relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
                    <?php } else { ?>
                        <h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
                    <?php } ?>
                    </div>      
                </div> 

...

css is

.jumbotron {
min-height: 40%;
text-align: center;
margin: 0px;
padding: 30px 40px;
background: url('../img/homeBG.jpg') no-repeat center center;
background-size: 100%;
background-color: #f4f4f5;
}