CODEWITHSUNDEEP
bootstrap-4
equinoxe5
equinoxe5

Reputation: 344

Have two navs at the top of the page with one fixed-top yet not overlapping the other

I'm trying to achieve the result illustrated here. The promotional banner needs to be sticky to the top of the page while the nav that is below it will scroll up with the rest of the content.

Here is some basic HTML that I use to do this. I have also set body {padding-top: 40px;} so the nav with the actual menu appears below the promotional banner.

<nav class="navbar navbar-expand-md fixed-top justify-content-center" style="background: rgba(0,0,0,0.7); color: white;">Promotional banner text goes here promotional banner text goes here promotional banner text goes here</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="index.php">Top navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="testimonials.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact1.php">Link</a>
      </li>
    </ul>
    <span style="color: #FFFFFF;">(555) 555 5555</span>
  </div>
</nav>

That's great if the viewport is wide enough to fit the text of the promotional banner, but if the text breaks onto second line it overlaps the menu. In this scenario, I would ideally have the menu just shift further below the promotional banner, but currently I've defined the distance of the nav bar from the top of the page using CSS body {padding-top: 40px;}

What is the correct way of solving this problem?

Upvotes: 1

Views: 1426

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14954

OK, I put the promo banner into a container and nested that within a container-fluid. Normally, containers shouldn't be nested but this is one of those rare exceptions.

Your navbar also sits inside a container. This is to make sure that users on wide 4K displays won't get mad at you. I also replaced some of your custom css with native Bootstrap 4 classes and that's pretty much it.

Here's the code: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid sticky-top" style="background: rgba(0,0,0,0.7);">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <div class="py-2 navbar-text text-white">Promotional banner text goes here promotional banner text goes here promotional banner text goes here. Promotional banner text goes here promotional banner text goes here promotional banner text goes here.</div>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <div class="container">
       <a class="navbar-brand" href="index.php">Top navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
           <ul class="navbar-nav mr-auto">
               <li class="nav-item">
                   <a class="nav-link" href="testimonials.php">Home</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="contact1.php">Link</a>
               </li>
           </ul>
           <span class="navbar-text text-white">(555) 555 5555</span>
       </div>
   </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions