How to leave content below the top fixed Bootstrap menu

Asked

Viewed 1,732 times

1

Hello, my question is the following, I’m trying to put a container-Fluid exactly under a div Fixed-top of Boostrap, where it contains a navbar Menu and a ul, I had to put to leave the two fixed at the top. I had to use css in Body to make room in the content, because the div was overwriting. I need to know if you can do it.

CSS:

body {
  padding-top: 200px;
}


@media (min-width: 768px) {
 body {
     padding-top: 107px;
 }
}

<div class="fixed-top">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">

                <a class="navbar-brand" href="#">Share Sound</a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>                   

                <div class="collapse navbar-collapse" id="navbar">
                    <div class="container-fluid">           
                        <div class="row">
                            <div class="col-md-9">      


                            <form class="form-inline">
                                <div class="input-group">
                                    <span class="input-group-addon" id="basic-addon1">
                                        <label for="nav_pesquisa" class="fa fa-search"></label>
                                    </span>

                                  <input type="text" class="form-control" placeholder="Pesquisar" aria-label="Pesquisa" aria-describedby="Pesquisa" name="nav_pesquisa" id="nav_pesquisa">

                                  <button class="btn btn-outline-success" type="submit">Search</button>
                                </div>
                             </form>
                        </div>

                <div class="col-md-3">      
                    <div class="btn-group dropdown" id="dropdown-form-topo">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="drop-login-cadastro" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Login / Cadastrar-se <i class="fa fa-user" aria-hidden="true"></i>
                        </button>

                          <div class="dropdown-menu" id="dropdown-form-info" aria-labelledby="drop-login-cadastro">
                                <form>
                                    <div class="form-group">
                                            <label for="Email">Email</label>
                                            <input type="email" class="form-control" id="Email" aria-describedby="Email" placeholder="Enter email">
                                    </div>

                                    <div class="form-group">
                                        <label for="Senha">Senha</label>
                                        <input type="password" class="form-control" id="Senha" placeholder="Password">
                                    </div>

                                    <div class="form-check">
                                        <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input">
                                            Check me out
                                         </label>
                                    </div>

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-outline-dark">Fazer Login</button>
                                    </div>
                                </form> 

                                <div class="text-center">
                                    <small class="form-text text-muted">———— OU ————</small>
                                </div>

                                <div class="text-center" id="cad_conta">
                                    <a class="dropdown-item" href="#">Cadastre-se</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </nav>

    <ul class="nav nav-expand-lg nav-pills nav-fill" id="ul-menu-topo">
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i>Perfil</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-commenting-o" aria-hidden="true"></i>Discussões</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-music" aria-hidden="true"></i>Músicas</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-trophy" aria-hidden="true"></i>Recordes</a>
        </li>
    </ul>

</div>


<div class="container-fluid text-center" id="cont-2">
        <div class="text-center" id="sub-titulo">       
            <center>
                <div id="back-title">
                    <p class="h2">Share Sound</p>
                    <span>Tentando proporcionar a arte tradicional da musica, <br>novas produções e 
                    infinitas possibilidades.<br></span>    
                </div>
                <img src="music4.jpg" class="col-md-12">    
            </center>               
        </div>
</div>
html css bootstrap

  • Do you use jQuery?

  • @Dvdsamm Yes, I use

  • I’ll post an answer using jQuery and see if it suits you.

1 answer

2


A solution using jQuery:

Delete these codes from the CSS:

body {
  padding-top: 200px;
}


@media (min-width: 768px) {
 body {
     padding-top: 107px;
 }
}

Add the jQuery below:

$(".navbar-toggler-icon").add(window).on('resize load click',function(e){
    espaco = 30; // ajuste de espaçamento à partir barra, em pixels
    if(e.type != "click"){
        $("body").css("padding-top",($("div.fixed-top").height()+espaco)+"px");
    }else{
        setTimeout(function(){
            $("body").animate({ 'padding-top': ($("div.fixed-top").height()+espaco)+'px' }, 50);
        },500);
    }
});


$(".navbar-toggler-icon").add(window).on('resize load click',function(e){
	espaco = 30; // ajuste de espaçamento à partir barra, em pixels
	if(e.type != "click"){
		$("body").css("padding-top",($("div.fixed-top").height()+espaco)+"px");
	}else{
		setTimeout(function(){
			$("body").animate({ 'padding-top': ($("div.fixed-top").height()+espaco)+'px' }, 50);
		},500);
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="fixed-top">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">

                <a class="navbar-brand" href="#">Share Sound</a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>                   

                <div class="collapse navbar-collapse" id="navbar">
                    <div class="container-fluid">           
                        <div class="row">
                            <div class="col-md-9">      


                            <form class="form-inline">
                                <div class="input-group">
                                    <span class="input-group-addon" id="basic-addon1">
                                        <label for="nav_pesquisa" class="fa fa-search"></label>
                                    </span>

                                  <input type="text" class="form-control" placeholder="Pesquisar" aria-label="Pesquisa" aria-describedby="Pesquisa" name="nav_pesquisa" id="nav_pesquisa">

                                  <button class="btn btn-outline-success" type="submit">Search</button>
                                </div>
                             </form>
                        </div>

                <div class="col-md-3">      
                    <div class="btn-group dropdown" id="dropdown-form-topo">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="drop-login-cadastro" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Login / Cadastrar-se <i class="fa fa-user" aria-hidden="true"></i>
                        </button>

                          <div class="dropdown-menu" id="dropdown-form-info" aria-labelledby="drop-login-cadastro">
                                <form>
                                    <div class="form-group">
                                            <label for="Email">Email</label>
                                            <input type="email" class="form-control" id="Email" aria-describedby="Email" placeholder="Enter email">
                                    </div>

                                    <div class="form-group">
                                        <label for="Senha">Senha</label>
                                        <input type="password" class="form-control" id="Senha" placeholder="Password">
                                    </div>

                                    <div class="form-check">
                                        <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input">
                                            Check me out
                                         </label>
                                    </div>

                                    <div class="text-center">
                                        <button type="submit" class="btn btn-outline-dark">Fazer Login</button>
                                    </div>
                                </form> 

                                <div class="text-center">
                                    <small class="form-text text-muted">———— OU ————</small>
                                </div>

                                <div class="text-center" id="cad_conta">
                                    <a class="dropdown-item" href="#">Cadastre-se</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </nav>

    <ul class="nav nav-expand-lg nav-pills nav-fill" id="ul-menu-topo">
        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i>Perfil</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-commenting-o" aria-hidden="true"></i>Discussões</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-music" aria-hidden="true"></i>Músicas</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#"><i class="fa fa-trophy" aria-hidden="true"></i>Recordes</a>
        </li>
    </ul>

</div>


<div class="container-fluid text-center" id="cont-2">
        <div class="text-center" id="sub-titulo">       
            <center>
                <div id="back-title">
                    <p class="h2">Share Sound</p>
                    <span>Tentando proporcionar a arte tradicional da musica, <br>novas produções e 
                    infinitas possibilidades.<br></span>    
                </div>
                <img src="music4.jpg" class="col-md-12">    
            </center>               
        </div>
</div>

The code adjusts the padding-top of body according to the height height fixed bar at the top.

  • worked out man, vlw !

  • @Gabrielmarangoni Cool! Mark the answer as right to help other people tb.

Browser other questions tagged html css bootstrap

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