Integrate popup bar with Bootstrap 5

Question

I am using bootstrap 5 and I am trying to integrate a component call bizzbar .

Find below my example code:

 /* Bizz Bar */ $(document).ready(function() { $("open").click(function() { $("#bizzbar").effect("bounce", "slow"); $("open").slideUp() }) }); $(document).ready(function() { $("#bizzbar").effect("bounce", "slow"); $("close").click(function() { $("#bizzbar").slideUp(); $("open").slideDown() }) });

 /** * Hellobar */ #bizzbar { background: #eb593c; width: 100%; text-align: center; color: #fff; padding: 2px; overflow: hidden; height: 30px; z-index: 1000; font-family: Georgia; font-size: 14px; line-height: 30px; position: fixed; top: 0; left: 0; border-bottom: 3px solid rgb(255, 255, 255); box-shadow: 0 1px 5px rgba(0, 0, 0, .7) } #bizzbar button { -webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; background: #333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: none; box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; color: white; cursor: pointer; font-size: 0.854em; margin: 0px 0px 0px 7px; outline: none; padding: 2px 10px 1px; position: relative; text-decoration: initial } #bizzbar button:hover { cursor: pointer; background: #444 } #bizzbar button:active { top: 1px } close { width: 20px; height: 19px; bottom: 6px; right: 20px; background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px; position: absolute } close:hover { background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px; cursor: pointer; height: 19px } open { -webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png); background-position: 0px -8px; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; display: block; height: 0px; outline: none; overflow: hidden; padding: 80px 0px 0px; position: absolute; right: 10px; top: -50px; width: 35px; z-index: 100; background-color: #eb593c; display: none } open:hover { background-color: #ff5a3d; cursor: pointer }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <header class="p-3 bg-dark text-white"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> <use xlink:href="#bootstrap"></use> </svg> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <li><a href="#" class="nav-link px-2 text-secondary">Product</a></li> <li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li> <li><a href="#" class="nav-link px-2 text-white">Industries</a></li> <li><a href="#" class="nav-link px-2 text-white">Education</a></li> <li><a href="#" class="nav-link px-2 text-white">About</a></li> </ul> <div class="text-end"> <!-- <button type="button" class="btn btn-outline-light me-2">Login</button> --> <button type="button" class="btn btn-warning">Sign-up</button> </div> </div> </div> </header> <main class="container pt-3"> <!-- <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item" aria-current="page">Insider</li> <li class="breadcrumb-item active" aria-current="page">Apple</li> </ol> </nav> --> <div id='bizzbar'> <p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p> <close></close> </div> <open></open> <div class="text-center py-5 px-0"> Content </div> </main> <!-- /.container --> <footer class="text-muted py-5"> <div class="container"> <p class="float-end mb-1"> <a href="#">Back to top</a> </p> <p class="mb-1">Build by Test.com</p> <p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p> </div> </footer>

Currently my hellobar is overlaying my header.

Any suggestions how to dynamically push my header below the hellobar and if I remove it the header goes up again?

I appreciate your replies!

Answer 1

You could add a margin-top with the same value like the height of the bizzbar ( 30px ) when you open the bizzbar and remove it when you close the bizzbar. But this is bad practice because you have to change the script when you change the CSS.

Working example: ( i added a transition to the header so that it doesn't "jump" when the margin is applied )

 /* Bizz Bar */ $(document).ready(function() { $("#bizzbar").effect("bounce", "slow"); $('header').css('margin-top', '30px'); $("open").click(function() { $("#bizzbar").effect("bounce", "slow"); $("open").slideUp(); $('header').css('margin-top', '30px'); }); $("close").click(function() { $("#bizzbar").slideUp(); $("open").slideDown(); $('header').css('margin-top', '0px'); }); });

 header { transition: margin .8s; } /** * Hellobar */ #bizzbar { background: #eb593c; width: 100%; text-align: center; color: #fff; padding: 2px; overflow: hidden; height: 30px; z-index: 1000; font-family: Georgia; font-size: 14px; line-height: 30px; position: fixed; top: 0; left: 0; border-bottom: 3px solid rgb(255, 255, 255); box-shadow: 0 1px 5px rgba(0, 0, 0, .7) } #bizzbar button { -webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; background: #333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: none; box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; color: white; cursor: pointer; font-size: 0.854em; margin: 0px 0px 0px 7px; outline: none; padding: 2px 10px 1px; position: relative; text-decoration: initial } #bizzbar button:hover { cursor: pointer; background: #444 } #bizzbar button:active { top: 1px } close { width: 20px; height: 19px; bottom: 6px; right: 20px; background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px; position: absolute } close:hover { background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px; cursor: pointer; height: 19px } open { -webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png); background-position: 0px -8px; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; display: block; height: 0px; outline: none; overflow: hidden; padding: 80px 0px 0px; position: absolute; right: 10px; top: -50px; width: 35px; z-index: 100; background-color: #eb593c; display: none } open:hover { background-color: #ff5a3d; cursor: pointer }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <header class="p-3 bg-dark text-white"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> <use xlink:href="#bootstrap"></use> </svg> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <li><a href="#" class="nav-link px-2 text-secondary">Product</a></li> <li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li> <li><a href="#" class="nav-link px-2 text-white">Industries</a></li> <li><a href="#" class="nav-link px-2 text-white">Education</a></li> <li><a href="#" class="nav-link px-2 text-white">About</a></li> </ul> <div class="text-end"> <!-- <button type="button" class="btn btn-outline-light me-2">Login</button> --> <button type="button" class="btn btn-warning">Sign-up</button> </div> </div> </div> </header> <main class="container pt-3"> <!-- <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item" aria-current="page">Insider</li> <li class="breadcrumb-item active" aria-current="page">Apple</li> </ol> </nav> --> <div id='bizzbar'> <p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p> <close></close> </div> <open></open> <div class="text-center py-5 px-0"> Content </div> </main> <!-- /.container --> <footer class="text-muted py-5"> <div class="container"> <p class="float-end mb-1"> <a href="#">Back to top</a> </p> <p class="mb-1">Build by Test.com</p> <p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p> </div> </footer>

---

A better way would be to check/get the height with the script. Unfortunately the outerHeight() only gives the correct result when you close the bizzbar:

 /* Bizz Bar */ $(document).ready(function() { $("#bizzbar").effect("bounce", "slow"); console.log($('#bizzbar').outerHeight()); $("open").click(function() { $("#bizzbar").effect("bounce", "slow"); $("open").slideUp(); console.log($('#bizzbar').outerHeight()); }); $("close").click(function() { $("#bizzbar").slideUp(); $("open").slideDown(); console.log($('#bizzbar').outerHeight()); }); });

 header { transition: margin .8s; } /** * Hellobar */ #bizzbar { background: #eb593c; width: 100%; text-align: center; color: #fff; padding: 2px; overflow: hidden; height: 30px; z-index: 1000; font-family: Georgia; font-size: 14px; line-height: 30px; position: fixed; top: 0; left: 0; border-bottom: 3px solid rgb(255, 255, 255); box-shadow: 0 1px 5px rgba(0, 0, 0, .7) } #bizzbar button { -webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; background: #333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: none; box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; color: white; cursor: pointer; font-size: 0.854em; margin: 0px 0px 0px 7px; outline: none; padding: 2px 10px 1px; position: relative; text-decoration: initial } #bizzbar button:hover { cursor: pointer; background: #444 } #bizzbar button:active { top: 1px } close { width: 20px; height: 19px; bottom: 6px; right: 20px; background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px; position: absolute } close:hover { background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px; cursor: pointer; height: 19px } open { -webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png); background-position: 0px -8px; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; display: block; height: 0px; outline: none; overflow: hidden; padding: 80px 0px 0px; position: absolute; right: 10px; top: -50px; width: 35px; z-index: 100; background-color: #eb593c; display: none } open:hover { background-color: #ff5a3d; cursor: pointer }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <header class="p-3 bg-dark text-white"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> <use xlink:href="#bootstrap"></use> </svg> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <li><a href="#" class="nav-link px-2 text-secondary">Product</a></li> <li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li> <li><a href="#" class="nav-link px-2 text-white">Industries</a></li> <li><a href="#" class="nav-link px-2 text-white">Education</a></li> <li><a href="#" class="nav-link px-2 text-white">About</a></li> </ul> <div class="text-end"> <!-- <button type="button" class="btn btn-outline-light me-2">Login</button> --> <button type="button" class="btn btn-warning">Sign-up</button> </div> </div> </div> </header> <main class="container pt-3"> <!-- <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item" aria-current="page">Insider</li> <li class="breadcrumb-item active" aria-current="page">Apple</li> </ol> </nav> --> <div id='bizzbar'> <p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p> <close></close> </div> <open></open> <div class="text-center py-5 px-0"> Content </div> </main> <!-- /.container --> <footer class="text-muted py-5"> <div class="container"> <p class="float-end mb-1"> <a href="#">Back to top</a> </p> <p class="mb-1">Build by Test.com</p> <p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p> </div> </footer>

Therefor you have to get padding and border too and calculate the height:

let bb_height = $('#bizzbar').height();
const bb_padding = parseInt($('#bizzbar').css('padding'));
const bb_border = parseInt($('#bizzbar').css('border-bottom-width'));
  
bb_height += (2 * bb_padding) + bb_border;

Working example:

 /* Bizz Bar */ $(document).ready(function() { let bb_height = $('#bizzbar').height(); const bb_padding = parseInt($('#bizzbar').css('padding')); const bb_border = parseInt($('#bizzbar').css('border-bottom-width')); bb_height += (2 * bb_padding) + bb_border; $("#bizzbar").effect("bounce", "slow"); $('header').css('margin-top', bb_height + 'px'); $("open").click(function() { $("#bizzbar").effect("bounce", "slow"); $("open").slideUp(); $('header').css('margin-top', bb_height + 'px'); }); $("close").click(function() { $("#bizzbar").slideUp(); $("open").slideDown(); $('header').css('margin-top', '0px'); }); });

 header { transition: margin .8s; } /** * Hellobar */ #bizzbar { background: #eb593c; width: 100%; text-align: center; color: #fff; padding: 2px; overflow: hidden; height: 30px; z-index: 1000; font-family: Georgia; font-size: 14px; line-height: 30px; position: fixed; top: 0; left: 0; border-bottom: 3px solid rgb(255, 255, 255); box-shadow: 0 1px 5px rgba(0, 0, 0, .7) } #bizzbar button { -webkit-box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; background: #333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: none; box-shadow: rgba(0, 0, 0, 0.278431) 1px 1px 3px; color: white; cursor: pointer; font-size: 0.854em; margin: 0px 0px 0px 7px; outline: none; padding: 2px 10px 1px; position: relative; text-decoration: initial } #bizzbar button:hover { cursor: pointer; background: #444 } #bizzbar button:active { top: 1px } close { width: 20px; height: 19px; bottom: 6px; right: 20px; background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -247px; position: absolute } close:hover { background: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png) no-repeat 0px -228px; cursor: pointer; height: 19px } open { -webkit-box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; background-image: url(https://hb-assets.s3.amazonaws.com/system/modules/hellobar/lib/sprite-8bit.png); background-position: 0px -8px; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.34902) 0px 0px 5px; display: block; height: 0px; outline: none; overflow: hidden; padding: 80px 0px 0px; position: absolute; right: 10px; top: -50px; width: 35px; z-index: 100; background-color: #eb593c; display: none } open:hover { background-color: #ff5a3d; cursor: pointer }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <header class="p-3 bg-dark text-white"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> <svg class="bi me-2" width="40" height="32"> <use xlink:href="#bootstrap"></use> </svg> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <li><a href="#" class="nav-link px-2 text-secondary">Product</a></li> <li><a href="#" class="nav-link px-2 text-white">Categoriy</a></li> <li><a href="#" class="nav-link px-2 text-white">Industries</a></li> <li><a href="#" class="nav-link px-2 text-white">Education</a></li> <li><a href="#" class="nav-link px-2 text-white">About</a></li> </ul> <div class="text-end"> <!-- <button type="button" class="btn btn-outline-light me-2">Login</button> --> <button type="button" class="btn btn-warning">Sign-up</button> </div> </div> </div> </header> <main class="container pt-3"> <!-- <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item" aria-current="page">Insider</li> <li class="breadcrumb-item active" aria-current="page">Apple</li> </ol> </nav> --> <div id='bizzbar'> <p class='bizztext'>Drive more attention to your most important website content with Bizz Bar. <button class='bizzbutton'>Click me</button></p> <close></close> </div> <open></open> <div class="text-center py-5 px-0"> Content </div> </main> <!-- /.container --> <footer class="text-muted py-5"> <div class="container"> <p class="float-end mb-1"> <a href="#">Back to top</a> </p> <p class="mb-1">Build by Test.com</p> <p class="mb-0">You have any questions? <a href="/">Do not hesitate to contact us!</a></p> </div> </footer>