Bootstrap custom open and close button hamburger menu

Question

I'm building a hamburger menu using Bootstrap. I want to use my own open and close buttons. I have succeeded at doing that. But I am having an issue :cthe hamburger icon does not show completely

Here is the code:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-light bg-light">
    
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
       <span class="close" style="margin-left:20px><img src="images/mobile-menu-close.png" width="33"></span>
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav" style>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
        </ul>
    </div>
</nav>

the css:

<style type="text/css">

.navbar-toggler>.close {
    display:inline;

}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display:none;
}
.navbar-light .navbar-toggler-icon{
    background-image: url(images/mobile-menu-open.png)!important;
    background-size: 33px 33px;
    background-repeat:no-repeat;
    margin-left: 20px;
}

.navbar-toggler {
    border: none;
    background-color: transparent;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar{
    width: 200px;
    background-color: transparent!important;
}
.navbar-collapse{
    background-color: gray;
}

</style>

Here are the images that I use: Any ideas?

Here is a picture of the broken hamburger menu:

score 0 · Answer 1 · answered Jul 26 '21 at 16:10

0

You have a missing " here:

style="margin-left:20px">

Instead of adding an image to the close span, it might be better to use Javascript to change the class and have your css added to that class so the hamburger changes to x on hit.

Check out: Bootstrap mobile menu icon change to x close

answered Jul 26 '21 at 16:10

Heather New

118
8

it won't solve my problem to use JS. I am customizing the hamburger icon itself – Sofia Lazrak Jul 26 '21 at 16:13
Yes, and now that you have an icon, your intention is to change it to the x when it's clicked so then they click the x to close the menu? True or false. Your code and the way you added your custom icon is breaking the menu currently. – Heather New Jul 26 '21 at 16:29
sorry to insist , but the problem is not in changing to the x when clicked, but rather how the custom hamburger image does not display the way it should. I can remove the close button option and I will still have the same problem. I will edit the post to show an image of the broken hamburger menu. – Sofia Lazrak Jul 26 '21 at 16:44
Okay, lets get back to basics. What's the purpose of working around the default icons if your custom icon looks the same? – Heather New Jul 26 '21 at 17:15
https://icons.getbootstrap.com/ You need to find a different way to add the icon instead of an image inside the span class="close" – Heather New Jul 26 '21 at 17:18
the way the icons look are not up to my choice!!!!! – Sofia Lazrak Jul 26 '21 at 17:20
Adding the icon to the span class with css would be the proper way to add custom icons. – Heather New Jul 26 '21 at 17:24
https://stackoverflow.com/questions/60947077/i-want-to-change-bootstrap-hamburger-deafult-icon – Heather New Jul 26 '21 at 17:27
that's exactly what I did: .navbar-toggler-icon{ background-image: url(images/mobile-menu-open.png)!important; background-size: 33px 33px; background-repeat:no-repeat; margin-left: 20px; } – Sofia Lazrak Jul 26 '21 at 17:32

Bootstrap custom open and close button hamburger menu

1 Answers1