CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
M. Douglas
M. Douglas

Reputation: 367

How to add animation to hamburger menu Bootstrap 4?

I am working on a website where I'd like to add an animation to my static navbar from Bootstrap. I want the 3 horizontal bars to change to an X when the button is toggled on mobile viewport.

Note: I am using Bootstrap 4, not 3. Some BS3 classes don't work in BS4

This is what I am trying to accomplish: example. However, I've found multiple tutorials but I am struggling with it. The reason for this is that all those tutorials are based on BS3. BS3 uses the navbar-toggle-class, but BS4 uses the navbar-toggler-class. It's major difference, since the BS4-version contains a viewbox in css:

.navbar-toggler {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    border-color: rgba(0,0,0,.1);
}

And in the bootstrap.min.css the navbar-toggler-class is being used for 11 times. So if I modify this class, it will (probably) break.

HTML of menu:
<div class="container">
        <div class="row hidden-lg-up">
            <div class="wrapper-right">
                <a href="#"><img src="img/placeholders/225x50.png" alt="Logo Company Mobile" class="mobile-only" /></a>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-light navbar-full">
                <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
                <div class="collapse navbar-toggleable-md" id="navbarResponsive">
                    <a class="navbar-brand vc-parent" href="#">
                        <img src="img/placeholders/250x50.png" alt="Logo Company Desktop" class="img-fluid desktop-only" />
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item active align-middle">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item align-middle">
                            <a class="nav-link" href="#">Item</a>
                        </li>
                        <li class="nav-item align-middle">
                            <a class="nav-link" href="#">Item</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

Could anyone point me in the right direction?

Upvotes: 0

Views: 1941

Answers (1)

Casio98
Casio98

Reputation: 11

Change .navbar-toggler-icon background when menu is opened to 

background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E");

Upvotes: 1

Related Questions