Bootstrap hamburger navbar icon is missing

Question

I use bootstrap 4 to make the navbar, when I make my window smaller, the hamburger is there, but it won't show up. It's functional, but I can't see it. Can anyone help me with this?

<nav class="navbar navbar-expand-lg navbar-custom">
    <div class="container"><a href="#landing" class="navbar-brand">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarNavDropdown">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="#landing">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skill">SKILL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#work">EXPERIENCE</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

please reformat or accept the current edit request that has been submitted to you — Ryan B, Jul 05 '18 at 11:45

Chris Nelson · Answer 1 · 2018-07-05T13:01:32.600

3

Bootstrap 4 has added new classes: navbar-dark and navbar-light, depending on your background color, you can add one of these classes to your navigation to make your mobile toggle visible.

You could also do something completely custom with a background color (shown below), or by swapping out the default icon.

    <nav class="navbar navbar-dark bg-dark">
       <!-- Navbar content -->
    </nav>

    <nav class="navbar navbar-dark bg-primary">
      <!-- Navbar content -->
    </nav>

    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
      <!-- Navbar content -->
    </nav>

AND if you really want to get fancy with animations and custom icons, check out these navbar customization examples: MDBootstrap examples

edited Jul 05 '18 at 13:01

answered Jul 05 '18 at 12:38

Chris Nelson

166
1
9

Hi, thanks for your answer. I want my navbar background is transparent, but when the window is small, I want it has background color. Is that even possible? – Nicole Jul 06 '18 at 03:03
It is Nicole, you can use media queries to accomplish this. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries OR You can use javascript or jquery to create a "listener" to measure browser window width, and then add and remove css classes based on the width. https://stackoverflow.com/questions/18477016/switching-css-classes-based-on-screen-size – Chris Nelson Jul 06 '18 at 11:35
Also take a look here to understand specificity and the Bootstrap mobile menu style: https://stackoverflow.com/questions/20540563/change-icon-bar-color-in-bootstrap .navbar-default .navbar-toggle .icon-bar { background-color: black; } – Chris Nelson Jul 06 '18 at 11:44
Hi, I think I know where the problem is... I always thought "☰" can only made by some complicated codes, but apparently I only need to add one line ``, and now it solved. As simple as that... But still thank you for your time. :) – Nicole Jul 07 '18 at 04:32

score 0 · Answer 2 · answered Jul 05 '18 at 12:24

0

By default your toggler is transparent;

.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;

}

answered Jul 05 '18 at 12:24

Onno V.

117
1
1
13

Yes, I know I can modify here, but I don't know how to let the three little lines show up? (Can you understand what I meant? :P) – Nicole Jul 06 '18 at 03:06
You can add that with 'span class="navbar-toggler-icon"' – Onno V. Jul 06 '18 at 07:44
The full html code of my navbar is in my question. If you want to see the CSS, here it is. `.navbar-custom { background-color: transparent; } .navbar-brand { font-size: 40px; } .navbar-custom .navbar-brand, .navbar-custom .navbar-text { color: rgba(255, 255, 255, .8); } .navbar-custom .navbar-nav .nav-link { color: rgba(255, 255, 255, .5); } .navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:hover .nav-link, .navbar-brand:hover { color: #6df0f5; } ` – Nicole Jul 06 '18 at 08:46
Most easy is when you take a look at this page: https://getbootstrap.com/docs/4.1/components/navbar/ Just start rebuilding, with the knowledge of the suggested color variations above. There will be a little mistake in the HTML. Also a important thing; just use the Bootstrap CSS from the CDN – Onno V. Jul 06 '18 at 08:49

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

It looks like you don't have any color scheme applied to the nav element. Without the theming classes the hamburger icon is transparent.

Adding navbar-dark bg-dark to your nav element would fix this problem.

Color Schemes Documentation

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 05 '18 at 12:36

S.Honderdos

55
10

I use custom theme because I want the navbar background is transparent. But I want it shows up when the window is smaller. – Nicole Jul 06 '18 at 03:07

Bootstrap hamburger navbar icon is missing

3 Answers3