Bootstrap 4: Struggeling with the responisve navbar element

Question

to rework an old webpage, based on Bootstrap 3, I tried to build up a new page from scratch with Bootstrap 4. I started with the navbar element, which should be always shown on top, have a brand logo and the left and some page links on the right - in priniciple not special, but I didn't manage it. I reduced my wishes more and more and I want solve the problem, I have with the toggling between icon menu and links.

I am only able to get the icon menu button always visible (without "collapse" in button class), also for large screens, or never visible (with "collapse" in button class). The rest of the code should be nearly standard as read in many many examples and tutorials. Could you please have a hint, what is it running wrong?

Thanks in advance, Ralf

Updated: I investigate with the Inspector and the it seems the navbar toogle button is there, but completely transparent!? Is this my problem and I have to define a color to this button (it works in principle with background-color, but I missed the lines inside) or could this a problem with Javascript and the switching function?

Here is the code - should be standard (all cosmetics are doesn't matter, I will care about later with css).

<html lang="de">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Testseite</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-default bg-light navbar-fixed-top py-lg-0">
        <div class="container-fluid">
            <a href="#" class="navbar-brand"><img src="./img/smile.png" width="60" height="60" alt="Logobeschreibung"></a>
            <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item active"><a href="#">Startseite<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Seite1</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Seite2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Seite3</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Menu -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin="anonymous "></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous "></script>
</body>

</html>

Does this answer your question? [Bootstrap 4 Change Hamburger Toggler Color](https://stackoverflow.com/questions/42586729/bootstrap-4-change-hamburger-toggler-color) — STA, Feb 08 '21 at 12:54

score 0 · Answer 1 · answered Feb 07 '21 at 16:02

I am assuming you want to always see this block of Bootstrap always shown in your header, correct?

    <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
        <span class="sr-only">Toggle navigation</span>
        <span class="navbar-toggler-icon"></span>
    </button>

Because Bootstrap controls its appearance based on the viewport width using media queries, a simple hack to force it to always show would be the following. Add this to your style sheet:

.navbar-toggle {
    display:inline-block !important;
}

I am not a fan of Bootstrap navigation for this reason and many more. It just feels incomplete and difficult to customize with CSS.

Thanks, but no, I want to have the standard behaviour. On large screens only the menu links are visible and, at a certain smaller screen, the links should disappear and the button should appear - and if it is pressed the menu links should appear in a vertical menu. I found some details, I added in the question post. — Ralf, Feb 07 '21 at 16:51

score 0 · Answer 2 · answered Feb 08 '21 at 12:55

Can you please check the below code? Hope it will work for you. You need to use navbar-toggler class in toggle button instead of navbar-toggle as per bootstrap documentation. We have given background in navbar-toggler because you used navbar bg-light class.

Please refer to this link: https://jsfiddle.net/yudizsolutions/3vmuec5g/10/

.navbar .navbar-toggler {
  background: #0000ff;
}

<html lang="de">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Testseite</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-default bg-light navbar-fixed-top py-lg-0">
        <div class="container-fluid">
            <a href="#" class="navbar-brand"><img src="./img/smile.png" width="60" height="60" alt="Logobeschreibung"></a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toogle navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item active"><a href="#">Startseite<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Seite1</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Seite2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Seite3</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Menu -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin="anonymous "></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx " crossorigin="anonymous "></script>
</body>

</html>

Thanks a lot, I fixed the typo in between. This typo causes the problem that the toggler was always there as a button with the expanded nav bar. Now I am fine with the result, problem is solved. Best Regards, Ralf — Ralf, Feb 08 '21 at 16:15

Bootstrap 4: Struggeling with the responisve navbar element

2 Answers2