jQuery: Enlarge navbar div out of/without enlarging navbar

On my site, I have a navigation bar filled with FontAwesome icons that uses a jQuery function to stick to the top (and change which half of it is rounded) after scrolling far enough down the page. I also want the "circle" div to protrude out of the navbar while being equally top-edge-aligned with the rest of the icons, like so. (Would also like to add a pagination widget underneath, but) My last attempt at this (inserting a relevant $(".circ").css({ // }) line into the below jQuery) made the larger "circle" div increase the entire navbar's height. How can I make it protrude instead? Thank you!

HTML:

<section id="splash">
    <div class="icon"><img src="IMAGE-URL"></div>
    <div>VERT/HORIZ TEXT+IMAGE CONTENT ATOP SPLASH IMAGE</div>
    <div id="nav">
        <i class="fas fa-home" title="Refresh"></i>
        <i class="fa fa-envelope" title="Ask"></i>
        <div class="circ"></div><!--NEEDS TO CHANGE SIZE ON SCROLL-->
        <i class="fas fa-edit" title="Submit"></i>
        <i class="fas fa-plus" title="More"></i>
    </div>
</section>

<section>
    <article class="post">
            REPEATING CONTENT UNIT
    </article>
    <article class="post">
            REPEATING CONTENT UNIT
    </article>
</section>

CSS:

#splash {
margin-bottom:50px;
width:100%;
height:50vh;
min-height:250px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align: center;
}
#nav {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
justify-content:space-evenly;
position:static;
top:0;
width:100%;
height:7.5vh;
min-height:30px;
max-height:60px;
line-height:2rem;
background:blue;
border-radius:30% 30% 0% 0%;
}

#nav i {font-size:1.33rem; color:white; cursor:pointer;}
#nav .circ {width:1.33rem; height:1.33rem; background:white; border-radius:30%; cursor:pointer;}

jQuery:

$(function(){
var navBar = $('#nav');
var stickyNavbarTop = navBar.offset().top;
$(window).scroll(function(){
    if ($(this).scrollTop() > stickyNavbarTop) {
        navBar.css({'border-radius': '0% 0% 30% 30%', 'position': 'fixed', 'top': 0});
    } else {
        navBar.css({'border-radius': '30% 30% 0% 0%', 'position': 'static', 'top': 0})
    }
});
})(jQuery);