Bootstraps 5.0 burger menu

Question

I'm using bootstraps and I don't know why my burger menu won't display. It's not the first time I'm using this framework so I think my install is good, my stylesheet link is in my head and my separate script for JavaScript & popper are in the end of my body in the right order, as bootstraps recommended.

I compare many time my code with bootstraps examples and with previous work I made which burger menu were working but I still can't find my mistake.

I don't have any error messages and when I use the devtools, I can see its here but not "activated": https://prnt.sc/xppsdv

 <head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,900&display=swap"
      rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<link rel="shortcut icon" href="#">
<?php wp_head(); ?>

 <div class="wrap-header">

            <nav id="mainnav" class="navbar navbar-expand-md">

                <?php
                if ($the_query->have_posts()) {
                while ($the_query->have_posts()) {
                $the_query->the_post();
                $img1 = get_the_post_thumbnail_url(get_the_ID(), 'logo_nav'); ?>
                <a class="navbar-brand" href="<?= esc_url(home_url('/'))?>">
                    <img class="nav-logo" src="<?php echo $img1; ?>"
                         alt="logo navigation">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon">ICI</span>
                </button>

                <div class="collapse navbar-collapse text-center" id="collapsibleNavbar">
                    <ul id="onglets" class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="les-solutions">Les solutions</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="nos-offres">Nos offres</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact-demo">Contact & Démo</a>
                        </li>
                        <li class="nav-item">
                            <div class="h-line"></div>
                        </li>
                        <li class="nav-item">
                            <?php
                            $img2 = get_field('image_2', get_the_ID()); ?>
                           <img class="image2" src="<?php echo $img2['sizes']['logo_nav2']; ?>" alt="">
                            <?php }}

                            wp_reset_postdata(); ?>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">Inscription</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">Connexion</a>
                        </li>
                </div>
            </nav>

    </div>

</header>

I changed the "data" attributes in "data-bs", thank you. I'm not using any scss files and I'm importing bootstraps via the link they gave on the website :

head : i share the code on the top
footer : https://prnt.sc/xrjixp

Here is what I have when I check the "span", no sign of any SVG content https://prnt.sc/xriath

I tried to use an other navbar example and it works so i added some code which was not in the button such as : aria-expanded="false" aria-label="Toggle navigation"

But the main issue was actually the color of the icon ... This helped me a lot : Bootstrap 4 Change Hamburger Toggler Color

First of all, if you use bootstrap5 your "data-*" attributes should be "data-bs-*" attributes. Could you please also provide your bootstrap imports? Are you using scss files or import bootstrap via cdn? Can you please also check, if your svg is working correctly, as i show you in this image: https://prnt.sc/xqxkoq — ansib, Jan 28 '21 at 08:22

score 0 · Accepted Answer · answered Jan 30 '21 at 12:33

0

These aria-* attributes are not the problem.

Could you please add one of the following css classes to your navbar: navbar-light or navbar-dark. At the end it should be something like this:

<nav id="mainnav" class="navbar navbar-light navbar-expand-md">

The navbar-toggler-icon in the bootstrap scss files is only added in the combination of navbar-light or navbar-dark with the class navbar-toggler-icon. you may also add a icon through fontawesome if you want.

You can check this for example here in the bootstrap navbar scss file (copied form the source code):

.navbar-light {
  [...]

  .navbar-toggler {
    color: $navbar-light-color;
    border-color: $navbar-light-toggler-border-color;
  }

  .navbar-toggler-icon {
    background-image: escape-svg($navbar-light-toggler-icon-bg);
  }
     
  [...]
}

answered Jan 30 '21 at 12:33

ansib

524
3
10

I added "navbar-light" last friday and I didnt know it was because of this missing. Thank you very much for your explanation. It's more clear now. :) – LeDude Feb 01 '21 at 09:24
You are welcome. Could you please mark your question as answered :) – ansib Feb 01 '21 at 15:45
I accepted your answer, should i do something else to ask the closure of my topic ? – LeDude Feb 02 '21 at 16:09

Bootstraps 5.0 burger menu

1 Answers1