CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andrea Tand
Andrea Tand

Reputation: 91

Adjust height dynamically

I have the following snippets in my code that help me achieve a fixed-top-navigation-on-scroll.

HTML:

<nav>
    <button class="navbar-toggler navbar-static-top hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
        <img class="navbar-brand" src="pics/logonavigation.png"/>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#navigation">HOME</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#about">ABOUT</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#services">OUR SERVICES</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#contact">CONTACT US</a>
            </li>
        </ul>
    </div>
</nav>

JAVASCRIPT:

    <script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - $('nav').height();
             if ($(window).scrollTop() > navHeight) {
                 $('nav').addClass('fixed');
             }
             else {
                 $('nav').removeClass('fixed');
             }
        });

       $('.navbar-toggler').click(function() {
        var newHeight = $('nav').height();
            $(".fixed").height(newHeight);
       });
    });
</script>

CSS:

.fixed {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
z-index: 1;
height: 50px;
}

The entire file pastebin can be found HERE

I am using bootstrap v4

Viewing the site in mobile view the following is observed:enter image description here

The collapsible portion of the navigation is left "bare" without the black background. What I would like is to get the effect below:

enter image description here

I cannot use the class "navbar" at because somehow it interferes with the fixed-top-navigation-on-scroll. How can I get the background of the collpasible portion of the navigation in mobile view to appear black? I tried adjusting the height of .fixed dynamically using jquery but it doesn't work.

Upvotes: 1

Views: 1110

Answers (1)

Jesse
Jesse

Reputation: 508

It's better to put your code into something more universally used like JSfiddle or CodePen.

Since I don't have a Pastebin account and can't easily run the code, I'll take a guess. Based on what I can see here, because your nav is gaining the .fixed class with a fixed height: 50px;, you're not going to get the black background behind the menu because it's only 50px tall.

Try changing it to height: auto;, assuming height is 50px before it gains .fixed. I'd also add a transition: height Xs; on it because when height is set to auto, it will "grow" to cover the menu.

EDIT

One big issue here is that you've declared a top AND bottom value on .nav. This was causing the full height for the .fixed nav. So remove that.

Then change the second half of your jQuery to this:

$(function() {
  $('.navbar-toggler').click(function() {
    $('nav').css('height', 'auto');
  });
})

So when .navbar-toggler is clicked, we add height: auto; to the nav.

This worked for me upon testing, as far as getting the navbar to expand to include the menu items without going full browser height.

I recognize that pulling bottom: 0 out from nav will cause placement issues relative to #screen1, but I don't understand why you put the nav inside that section anyway. I would put it between #section1 and #section2.

You could change the height for #section1 to be calc(100vh - 50px) so that the navbar fits perfectly at the bottom of the screen.

Upvotes: 1

Related Questions