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

Questions

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

September 26, 2022

We have a left side navigation menu as such:

<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>

What I’m trying to do is get a header above the <ul> tag. I’ve tried:

<div class='flex-column'>
    <h3>header</h3>
</div>
<ul class='nav flex-column flex-nowrap text-1rem overflow-hidden' id='vnav'>

But it just makes it into a new column. I’ve tried adding in rows as well with no luck there either.

>Solution :

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>