Bootstrap 4 Page Wide Header Bar Above Navbar

Bootstrap 4 page wide header bar above navbar

The fixed-top navbar is always on top.

To put your header bar above it, determine how tall you want the pagewide bar, and set the top: space above the fixed navbar. Use a media query to hide on smaller screens.

https://www.codeply.com/go/bembG1Lulg

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

    .pagewide {
        height: 54px;
    }
}

Display Bootstrap Content above Navbar

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

Add a full width image above a Bootstrap navbar

<div /> means <div> in HTML 5 and not <div></div> as it does in XHTML. Div's are not valid self closing tags.

Ref

Demo

<div class="wrapper"></div>
<div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li class="active">
            <a class="brand" href="#">Home</a>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

Bootstrap 4.0 - responsive header with image + navbar + full-height body

Instead of setting defined heights, use flexbox to make the content area fill the height of it's parent container (which in this case is the body).

body {
    display:flex;
    flex-direction:column;
}

.flex-fill {
    flex: 1 1 auto;
}

.flex-shrink {
    flex-shrink: 0;
}

https://codeply.com/go/fKNRvG0Hak

Note: The flex-fill utility class will be included in the next Bootstrap 4.2 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

---

Similar questions:

Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow

Bootstrap 4 Navbar and content fill height flexbox

Bootstrap 4 page wide header bar above navbar

Bootstrap 4 navbar with fixed-top: text overflows

fixed-top, as the name suggests, is not for "left" navbars, but for "top" navbars.

What you want to achieve is not achievable by adding classes to your navbar. You need to apply:

position: fixed;
top: 0;
min-height: 100vh;

to the column and also to offset the content column by the width of your sidebar, as a position:fixed element is taken out of the document flow so if you don't offset the rest, they will overlap.

Here it is:

.row {  background: #f8f9fa;}
@media (min-width: 575px) {  #sidebar {  position: fixed;  min-height: 100vh;  top: 0;  }}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script><link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/><script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <div class="container-fluid">    <div class="row">            <div class="col-sm-2 bg-dark" id="sidebar">            <nav class="navbar navbar-dark px-0"> <!--remove fixed-top and it's fine-->                    <ul class="nav flex-column navbar-nav"><li class="nav-item"><a href="index.html" class="nav-link">Home</a></li><li class="nav-item"><a href="hello.html" class="nav-link">Hello</a></li><li class="nav-item"><a href="howdy.html" class="nav-link">Longword and longword</a></li>                    </ul>            </nav>        </div>

        <div class="col-12 col-sm-10 bg-primary offset-0 offset-sm-2">
            blalbllala            blalbllala            blalbllala            blalbllala            <br><br><br><br><br><br><br><br><br><br><br>            <br><br><br><br><br><br><br><br><br><br><br>            <br><br><br><br><br><br><br><br><br><br><br>            <br><br><br><br><br><br><br><br><br><br><br>            <br><br><br><br><br><br><br><br><br><br><br>            blalbllala            blalbllala            blalbllala            blalbllala            blalbllala <br>        </div>    </div></div>

Bootstrap 4.x stack flex-columns to put a header above a vertical navigation menu

Does this solve your problem?

.header {
  width: 20vw;
  height: 10vh;
  border: 1px solid red;
}

.nav {
  width: 20vw;
  height: 90vh;
  border: 1px solid red;
}

@media screen and (max-width: 768px) {
  .header {
    height: 20vh;
  }
  
  .nav {
    height: 80vh;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class='header flex-column'>
  <h3>header</h3>
</div>
<ul class='nav flex-column flex-nowrap text-1rem overflow-hidden' id='vnav'>
  <li class='nav-item'>
    <a class='nav-link collapsed' href='##submenu1' data-toggle='collapse' data-target='##submenu1'>
      <i class='fa-fw fa-sm fa-regular fa-user'></i><span class='ml-1'>Student Profile</span>
    </a>
  </li>
</ul>

How to display Bootstrap 4 navigation bar links next to each other and floating to the right?

The menu item stacking happens due to the .navbar-expand-lg class. xs/sm/md viewports will stack the menu items since the rendering should be stacked once the collapsed menu view (hamburger menu) is being used. You can see I changed it to .navbar-expand-sm to hopefully illustrate this better when running the code snippet (depending on how wide your browser is).

Also, add .justify-content-between to the <nav> element to right align the nav or you can add .ml-auto to the .navbar-nav <div> or even use .w-100 along with .justify-content-end to force nav to be full width.

You'll probably want to wrap the .navbar-nav element with: <div class="collapse navbar-collapse"></div> and include a navbar toggler button, similar to their documentation: https://getbootstrap.com/docs/4.0/components/navbar/#toggler

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-expand-sm navbar-dark bg-dark justify-content-between">  <a class="navbar-brand" href="#">Peek Solutions</a>  <div class="navbar-nav justify-content-end">    <a class="nav-item nav-link" href="#">About</a>    <a class="nav-item nav-link" href="#">Services</a>    <a class="nav-item nav-link" href="#">Contact</a>  </div></nav>

twitter bootstrap navbar fixed top overlapping site

Your answer is right in the docs:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

and in the Bootstrap 4 docs...

Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.

Navbar overlapping content in Bootstrap 4

First thing wrong I see is you are using ID's to style elements, NO, use class.
You are using ID "portfolio" in more than 1 element while Id should be unique in document.
Anyway to fix your problem just add margin-top: 100px; will be enough

.portfolio {
  background-color: #bcd39c;
  width: 100%;
  height: 100%;
  padding-top:50px;
  margin-top:100px;
}

and add a class in html

<div id="portfolio" class="portfolio"> 

and also in other needed IDS.
Hope it helps!
I'm working on this site and did exactly what you are trying to achieve, check it out

Bootstrap navbar fixed-top

Here is what I could come up with. It dynamically changes the nav bar to fixed using jQuery. You can use the console.log to test when to switch to a fixed nav menu. I will post some of the code here, but I recommend looking at my code pen here.

$(function() {
  $(window).scroll(function() {

    //use this number to determine when to switch to fixed menu
    console.log($(window).scrollTop())

    if ($(window).scrollTop() > 55) $('#navbar').addClass('navbarFixed');

    if ($(window).scrollTop() < 56) $('#navbar').removeClass('navbarFixed');

  });
});

.banner {
  height: 50px;
  width: 100%;
  background-color: red;
}

#navbar {
  border: 0;
  background-color: #4080ff;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

.navbarFixed {
  top: 0;
  position: fixed;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner">Hello, Alec!</div>
<div id="navbar">
  <a>About</a>
  <a>Faith</a>
  <a>Sports</a>
  <a>Pups</a>
</div>

---

Related Topics