Inspiring

Answered

Header navbar with horizontal banner below

Forum|Forum|5 years ago
February 28, 2020
2 replies
6556 views

Any tips for ensuring a banner that falls beneath the header/nav bar keeps "locked" just below it?

When I check responsive, it detaches and separates. Other point, this header bar shrinks a bit upon user scrolling or rather, when browser is collapsed.

Is there a fix to keep that banner tightly snug under header/nav or do I need to write the media queries for the breakpoints to make fine adjustments?

Thank you.

This topic has been closed for replies.

Correct answer Nancy OShea

With Bootstrap 4.3.1

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<style>
body {
padding-top:70px
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<!--banner image-->
<img src="https://dummyimage.com/1200x400" class="img-fluid" alt="Placeholder image">
</div>
</div>
<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy OSheaCorrect answer

Community Expert

With Bootstrap 4.3.1

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<style>
body {
padding-top:70px
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>
<li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<!--banner image-->
<img src="https://dummyimage.com/1200x400" class="img-fluid" alt="Placeholder image">
</div>
</div>
<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

R

r_tistAuthor

Inspiring

Nancy, thank you so much. I had some time to examine this code and I was able to pinpoint my issue.

This rule in the body keeps the banner flush with the navbar, without creating a greater large white gap between them at different responsive breakpoints.

padding-top:70px

I was trying to be slick and use the modern units of measure as much as possible and had vh as my unit. - This is what caused a white gap to appear between navbar and upper banner when I collapsed the screen at certain breakpoints and it was driving me crazy.

I simply switched to px and modifed my measurements. It is not stuck and flush with top navbar regardless of the stretching and collapsing of the browser.

Do you have any thoughts on vh and when most appropriate to use?

Thank you.

BenPleysier

Community Expert

Have a look here: https://www.sitepoint.com/css-viewport-units-quick-start/

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Without a URL, I have no idea what any of this means. Sorry.

Nancy O'Shea— Product User, Community Expert & Moderator

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded