Easiest Way to Have a Bootstrap Layout Where the Burger Menu Is Always Visible

Bootstrap - always hamburger menu

You need to use the "navbar-expand-lg" or "navbar-expand-md" etc classes to make the bootstrap 4 navbar only show the burger menu on smaller screens.

Here's the official bootstrap example.

https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

And an example merged with your code.

<div class="container">
   <nav class="navbar navbar-toggleable-md navbar-expand-md navbar-light" id="commRollover">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="img/logo.png" alt="Logo" style="height: 40px;" ></a>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">O nas<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>

                </ul>
            </div>
        </nav>
  </div>

Display Bootstrap's hamburger menu by default and place it on the left side

If you want to create a navbar with a three line "hamburger" on mobile devices, just follow the official Bootstrap template. If you want to move the button to the left, just add a float: left to the css or use the class "pull-left" on the button. Do note that you will need to add some margin: left to make sure there's some spacing between the button and the left border.

Bootply example here

How do I make my hamburger menu appear directly under my hamburger icon?

I would like to show a completely different approach without using display: flex.

HTML

Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.

Hence, as @scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.

CSS

First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.

Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).

As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.

As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.

Final Solution

This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:

$('.menu-btn').click(function() {  $('nav').toggleClass('nav-open');});

* {  margin: 0;  padding: 0;  box-sizing: inherit;}
html {  font-size: 62.5%;}
body {  font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  box-sizing: border-box;}
header {  width: 100%;  background-color: orange;  text-align: center;  padding: 1rem;  position: relative;}
nav {  display: none;  width: 30rem;  padding: 5rem;  background-color: #ededed;  position: absolute;  right: 5%;  top: 100%;}
.nav-open {  display: block;}
nav a {  display: block;  width: 100%;  text-align: center;  padding: 1.4rem 1.6rem;  text-decoration: none;  cursor: pointer;  font-size: 2.2rem;  color: #000;}
nav a:hover {  background-color: #111;  color: #fff;}
.menu-btn {  position: absolute;  right: 5%;  top: 50%;  margin-top: -1.1rem;  display: inline-block;  cursor: pointer;  border: none;  outline: none;  background-color: transparent;}
@media only screen and (min-width: 500px) {  .menu-btn, nav {    display: none !important;  }}
.menu-btn span {  display: block;  width: 2rem;  height: 0.2rem;  margin: 0.4rem 0;  background: #989da1;  z-index: 99;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header>  <h2>Page Title</h2>  <button class="menu-btn">    <span></span>    <span></span>    <span></span>  </button>
  <nav>    <a href="vote.html">Vote</a>    <a href="search.html">Search</a>    <a href="about.html">About</a>    <a href="login.html">Log In</a>  </nav></header>

Hide bootstrap hamburger icon when no nav-items exists

I see 2 ways to accomplish what you want.
1. Remove the button altogether.
2. Add 'd-none' to the span class.

<a class="navbar-brand" href="#">Navbar Without Nav Items</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon d-none"></span>
  </button>

How to force hamburger menu in Bootstrap 3.3.7 even for Desktop?

From Bootstrap documentation:

Changing the collapsed mobile navbar breakpoint

The navbar collapses
into its vertical mobile view when the viewport is narrower than
@grid-float-breakpoint, and expands into its horizontal non-mobile
view when the viewport is at least @grid-float-breakpoint in width.
Adjust this variable in the Less source to control when the navbar
collapses/expands. The default value is 768px (the smallest "small" or
"tablet" screen).

you can use this customization tool to customize the breakpoint and compile it or just edit variables.less

@grid-float-breakpoint:   YOUR-BREAK-POINT

---

Related Topics