How to hide fixed div in mobile?

Navigation
1

I need to leave a responsive page, in it I have a filter that is fixed and I want to hide the filter on a button when the screen is smaller than 750px 

<div class="col-lg-3 col-md-6"> <!-- comeco do filtro --> 
                    <div class="card position-fixed">
                        <div class="card-body">
                            <h6 class="card-subtitle">Preço</h6>
                            <div id="range_03"></div>
                            <div>
                                <br>
                                <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-primary">
                                            <input type="radio" name="options" id="option1" autocomplete="on" checked> Vinho
                                        </label>
                                        <label class="btn btn-primary active ">
                                            <input type="radio" name="options" id="option2" autocomplete="off"> Agua
                                        </label>
                                </div>
                            </div><br><hr><br>

                            <!-- Outros Filtros-->
                            <div class="form-group ">
                                <h6 class="card-subtitle">Tipo</h6>
                                <select class="form-control custom-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Pessoas</h6>
                                <input type="text" class="form-control form-control-line" >
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Quartos</h6>
                                <select class="form-control custom-select">
                                    <option>03</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Palavra chave</h6>
                                <input type="text" class="form-control form-control-line" >
                            </div>
                        </div>
                    </div>               
                </div> <!--FIM DO FILTRO -->

Below the filter is a window type

    
asked by anonymous 27.11.2018 / 19:41

2 answers

2

I'll give you a solution, but you have to test on your project because it's really something I did for the first time and I do not know how the behavior will be there. But basically I used the Navbar structure to put your filter inside: D

FollowthecodeIusedtogettheresultoftheimageabove.

@media only screen and (min-width:768px) {
    #navbarsExample04 {
        display: block !important;
    }
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>



    <div class="row">
        <div class="col-3">
            <nav class="navbar navbar-expand-md navbar-light ">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
                    aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExample04">


                    <div class="card position-fixed">
                        <div class="card-body">
                            <h6 class="card-subtitle">Preço</h6>
                            <div id="range_03"></div>
                            <div>
                                <br>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="option1" autocomplete="on" checked>
                                        Vinho
                                    </label>
                                    <label class="btn btn-primary active ">
                                        <input type="radio" name="options" id="option2" autocomplete="off"> Agua
                                    </label>
                                </div>
                            </div><br>
                            <hr><br>

                            <!-- Outros Filtros-->
                            <div class="form-group ">
                                <h6 class="card-subtitle">Tipo</h6>
                                <select class="form-control custom-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Pessoas</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Quartos</h6>
                                <select class="form-control custom-select">
                                    <option>03</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Palavra chave</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>
                        </div>
                    </div>
                </div>
                <!--FIM DO FILTRO -->

            </nav>
        </div>
    </div>
    
27.11.2018 / 20:18
-1

@media only screen and (min-width:768px) {
    #navbarsExample04 {
        display: block !important;
    }
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>



    <div class="row">
        <div class="col-3">
            <nav class="navbar navbar-expand-md navbar-light ">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
                    aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExample04">


                    <div class="card position-fixed">
                        <div class="card-body">
                            <h6 class="card-subtitle">Preço</h6>
                            <div id="range_03"></div>
                            <div>
                                <br>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="option1" autocomplete="on" checked>
                                        Vinho
                                    </label>
                                    <label class="btn btn-primary active ">
                                        <input type="radio" name="options" id="option2" autocomplete="off"> Agua
                                    </label>
                                </div>
                            </div><br>
                            <hr><br>

                            <!-- Outros Filtros-->
                            <div class="form-group ">
                                <h6 class="card-subtitle">Tipo</h6>
                                <select class="form-control custom-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Pessoas</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Quartos</h6>
                                <select class="form-control custom-select">
                                    <option>03</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Palavra chave</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>
                        </div>
                    </div>
                </div>
                <!--FIM DO FILTRO -->

            </nav>
        </div>
    </div>

It gave some bugs but I think I solve it, thank you

    
27.11.2018 / 21:05
The text does not fit inside the button in IOS How to clear / remove ALL elements of the array in javascript?