Decrease navbar size when scrolling

Asked

Viewed 28 times

1

I need to decrease the size of the navbar when the user scrolls the screen but keep the tab with the done for you, salty pizzas..., I’m using the materialize and I’m having difficulties.


.altura{
    padding-bottom: 79px;
}

<div class="navbar-fixed">  
                <nav class="yellow lighten-4" id="navbartamanho">
                    <div class="nav-wrapper">
                        <!-- Logo para PC -->
                        <a href="#" class="brand-logo left">
                            <div class="hide-on-med-and-down">
                                <img src="img/logo.png" id="logo" alt="Logo">
                            </div>  
                        </a>

                        <!-- Logo para Tablet / Celular -->
                        <a href="#" class="brand-logo center">
                            <div class="hide-on-large-only">
                                <img src="img/logo.png" id="logo2" alt="Logo2">
                            </div>  
                        </a>

                        <a href="#" data-target="mobile-demo" class="sidenav-trigger" id="botaoaba"><i class="material-icons black-text">menu</i></a>

                        <ul class="left hide-on-med-and-down" id="abas">
                            <li>
                                <a href="#modal1" class="modal-trigger black-text">                     
                                    <i class="material-icons left">account_circle</i>
                                    Logar/Cadastrar
                                </a>
                            </li>

                            <li>
                                <a href="#modal4" class="modal-trigger black-text">
                                    <i class="material-icons left">account_circle</i>
                                    Minha Conta
                                </a>
                            </li>

                            <li>
                                <a href="#modal2" class="modal-trigger black-text">                     
                                    <i class="material-icons left">contact_mail</i>
                                    Dom Delivery
                                </a>
                            </li>

                            <li>
                                <a href="#modal3" class="modal-trigger black-text">                         
                                <i class="material-icons left">contact_phone</i>
                                    Fale Conosco
                                </a>
                            </li>
                        </ul>
                        <ul class="right" id="carrinho">
                            <li>
                                <a href="#"><i class="material-icons left black-text">shopping_cart</i></a>
                            </li>
                        </ul>
                    </div>

                    <div class="row">
                        <div class="container-fluid">
                            <div class="nav-content">
                                <ul class="tabs z-depth-5">
                                    <div class="col l2 m2 amber lighten-5" data-ref="pravoce">
                                        <li class="tab">
                                            <a class="black-text" href="#feitopravoce">
                                                <b>Feito Pra Você</b>                               
                                            </a>                                            
                                        </li>
                                    </div>  

                                    <div class="col l2 m2 amber">
                                        <li class="tab">
                                            <a class="white-text" href="#pizzasalgada">
                                                <b>Pizzas Salgadas</b>
                                            </a>
                                        </li>
                                    </div>  

                                    <div class="col l2 m2 light-green lighten-2">   
                                        <li class="tab">
                                            <a class="white-text" href="#">
                                                <b>Pizzas Doces</b>
                                            </a>
                                        </li>
                                    </div>  

                                    <div class="col l2 m2 green darken-3">      
                                        <li class="tab">
                                            <a class="white-text" href="#">
                                                <b>Esfihas</b>
                                            </a>
                                        </li>
                                    </div>  

                                    <div class="col l2 m2 pink lighten-2">
                                        <li class="tab">
                                            <a class="white-text" href="#">
                                                <b>Hamburgueres</b>
                                            </a>
                                        </li>
                                    </div>  

                                    <div class="col l2 m2 cyan lighten-1">
                                        <li class="tab">
                                            <a class="white-text" href="#">
                                                <b>Bebidas</b>
                                            </a>
                                        </li>   
                                    </div>                                    
                                </ul>
                            </div>
                        </div>  
                    </div>      
                </nav>
            </div>
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.