Display Bootstrap Content above Navbar

Question

How to display content above the bootstrap navigation bar. I tried the below code but I got the display content below the navigation bar.

index.html

 <body>
  <div class="container" id="topContent">Desktop only content above nav..</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-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="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>

style.css

  @media (max-width: 767px) { 
       .navbar{
          margin-top:0;
          top:-65px;
           position:relative;
        }
        #topContent{
          margin-top:45px;
        }

Carol Skelly · Accepted Answer · 2018-10-08T14:28:20.957

Assuming you want a fixed Navbar, you would use min-width instead of max-width in the media query...

@media (min-width: 992px) { 
   .navbar{
      margin-top:0;
      top:45px;
    }
}

Demo 1: https://www.codeply.com/go/l0MAcYsfO2

If you want to avoid the extra CSS, use one of the responsive utility classes. For example, use mt-lg-5 for a top margin that is only applied on desktop (lg and up).

<div class="container" id="topContent">Desktop only content above nav..</div>

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

Demo 2: https://www.codeply.com/go/voowMd6pom

Also see: Bootstrap 4 page wide header bar above navbar

score 2 · Answer 2 · answered Oct 08 '18 at 13:58

Try to remove the class fixed-top in nav class=

HTML

<body>
  <div class="container" id="topContent">Desktop only content above nav..</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-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="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>

In CSS try to:

@media (max-width: 767px) { 
       .navbar{
          margin-top: 20px // the size that you want to your div above the navbar
        }
        #topContent{
          top: 0;
          position: fixed;
        }

Remember in this css you are setting the classes for max-width: 767px so test in this size of screen, let me know with that works :)

score 0 · Answer 3 · answered Oct 08 '18 at 13:57

0

In this code,

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

fixed-top class is there. It will make the nav bar fixed at top only

answered Oct 08 '18 at 13:57

lazyHead

134
6

score -1 · Answer 4 · answered Oct 08 '18 at 14:00

I guess the best way to do this is not to tamper with the Actual bootstrap components as anyone would advise you who has been working with it in the last couple of years.

The easiest way to achieve what you want to do is creating two seperate content boxes inside the Navbar like this:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    HELLOO
  </div>
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
 </nav>

Using two containers inside the navbar will asure you that they will stay on top of each other. This might also tamper with the responsive design but you can single handedly erase the diffrent containers for defined resolutions where you don't want them to appear.

You should not try to use a lot of css here becuase it looks easy. Defining Stuff on the html part is way more efficient and can save you a lot of time later on :)

Yes it doesen't work I just wanted to provide a concept idea rather than a css way of squirming code where you probably wont have the control for long if you would proceed like that. The class names can differ of course, I don't even know what he defined the container with, if it is pure bootstrap or if he changed width or height accordingly to the css he provided above. — NotAdrian, Oct 08 '18 at 14:20
The big problem with the usage of static css variables is that he will not be able to modify/optimize it well for mobile devices, which is why you should allways let the framework do the work for you, even/especially when it comes to bootstrap. Another good alternative might be material design lite but I really don't like to tell people that what they are doing is wrong from the beginning because it ain't :) — NotAdrian, Oct 08 '18 at 14:23

Display Bootstrap Content above Navbar

4 Answers4