Bootstrap navbar to top on small screen size

Question

I am looking to achieve simple functionality but I cannot seem to a good solution in any of the Bootstrap documentation or anywhere online. I would like to create a navbar in bootstrap that sits on the left-hand side of the screen. When the screen size is small, I would like the navbar to be on the top of the screen. How can this be achieved? Ideally, I would like to achieve this strictly via the HTML or CSS.

Answer 1

Bootstrap doesn't support left aligned navbars. But you can make one yourself quite easily with media queries. Here is a simple example:

/* mobile default is left aligned */
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-block;
  width: 50px;
  height: 100%; 
}

.navbar-item {
  /* navbar items shown vertically on mobile */
  display: block;
}

@media screen and (min-width: 480px) {
  .navbar {
    /* morphs to full width on top on screens larger than mobile */
    height: 50px;
    width: 100%;
  }

  .navbar-item {
    /* Navbar items are now rendered side by side */
    display: inline-block;
  }
}

Hope that helps! let me know if you have any further questions.

EDIT: Here is a sample working codepen link with this code: https://codepen.io/anon/pen/ewyLvW