Codeigniter 3.1 - Bootstrap 4 navbar won't collapse

Question

I am using this code inside CodeIgniter 3.1.6 + Bootstrap 4.0 - beta 2 and the navbar when it collapses is no longer navigable; clicking the button does not happen anything. The same code tried on bootply instead works correctly, can someone explain me why?

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">
            {url type="anchor" url="" text=$header.site_title|escape:"html":"UTF-8" attr="class='navbar-brand'"}
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ml-auto">
            {if $current_user.user_role eq 'Admin'}
                    <li class="nav-item">
                                            <a class="nav-link" href="/index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/admin">Admin</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
                {elseif $current_user.user_role eq 'Buyer'}
                    <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
                {elseif $current_user.user_role == 'Vendor'}
                    <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>

                {elseif $current_user.user_role == 'half'}
                    {if $allow_guests eq TRUE}
                        <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    {/if}
                    <li class="nav-item"><a class="nav-link">Logout</a></li>
                {else}
                    {if $allow_guests eq TRUE}
                        <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                    {/if}
                    <li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
                {/if}
        </ul>
            </div>
    </div>

Here is the link to the bootply: https://www.bootply.com/cl3LVVqW5y Executing the code and scaling/zooming the window the menu remains clickable

HTML Generated

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="container">
    <a href="/index.php" class='navbar-brand'>Brand</a>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ml-auto">
                                                                <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                                            <li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
                    <li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
                            </ul>
    </div>
</div>  

Answer 1

First you should know that CodeIgniter cannot change the way your HTML behaves after it's generated. A modern browser should display the generated HTML just fine.

I used the Bootstrap 4 starter template: https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template

The code you posted (and the generated HTML) is missing a closing nav tag. Even without the closing nav tag, your code works when inserted into the starter template. This may mean that the source of the error is in your template, or code that you're not showing us.

Since you are using .navbar-expand-sm , the navbar switches to small device mode at 576px. I am not experiencing any problems when I view the following code in my browser:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Stack Overflow Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    </head>
    <body>

        <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="container">
                <a href="/index.php" class='navbar-brand'>Brand</a>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
                        <li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
                    </ul>
                </div>
            </div> 
        </nav>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

If you run this in your browser, and if you are still having problems, perhaps your browser doesn't support the newer features of bootstrap 4. I know this isn't really a good answer, but was trying to help you figure your problem out.

Answer 2

修复了标题中缺少popper.js的问题！