Bootstrap - always hamburger menu

jquery html css twitter-bootstrap

13,554

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>

13,554

Tymek T.

Updated on June 04, 2022

Comments

Tymek T. about 2 years

I have a problem with Bootstrap. When I check my code for example in codepen, the navbar is responsive, changes from visible links to hamburger menu, but if I check it in my document, it is always hamburger menu, no matter if it's big or small resolution. Can you help me? I am trying to solve it and I have no idea what is going on.

body {
  background-image: url("img/bg.png");
  font-family: 'Raleway', sans-serif;
}

<html lang="pl">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
        <nav class="navbar navbar-toggleable-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>
</body>

Jerodev over 6 years

What do you mean with it is always hamburger menu? Of course the code will always be visible, it's the css that styles the menu to look good on any screen.
Tymek T. over 6 years

I mean there is always the toggle button, both mobile and desktop version.

Dario Zadro almost 3 years

And, to ALWAYS show the hamburger menu, you can omit the navbar-expand-{sm, md, lg, xl, xxl} altogether, at least that's true on BS5.