Bootstrap 4 Nav bar

Question

Bootstrap 4 Nav bar

Asked 7 years ago

Viewed 623 times

1

Good morning This is the code I use in my menu bar, but when you do Collapse the button is the whole size of the bar by raising the logo icon, I wanted the Collapse button to look the way it should look (square). The css code is from Bootstrap4

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#"><img src="img/#.png" alt="#" width="25" height="25"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto">
            <li><a class="nav-link" href="#.php">#</a></li>
            <li><a class="nav-link" href="#.php">#</a></li>
            <!--li><a class="nav-link" href="#.php?id=">#</a></li-->
            <li><a class="nav-link" href="#.php">#</a></li>
            <li><a class="nav-link" href="#.php">#</a></li>
            <li><a class="nav-link" href="#.php">#</a></li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="password.php">Password</a>
            </li>
            <li clas="nav-item">
                <?php 
                    date_default_timezone_set("Europe/Lisbon");
                    echo '<a class="nav-link">'.date("d-m-Y").'</a>';
                ?>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="<?php echo $logoutAction ?>">Logout</a>
            </li>
        </ul>
    </div>
</nav>

Adelino using Bootstrap-4 and without adding any other CSS here worked normally in Chrome and Firefox.

– hugocsl

2017/12/20 at 10:46
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" crossorigin="Anonymous"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" crossorigin="Anonymous"> <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.css" crossorigin="Anonymous"> <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css" crossorigin="Anonymous"> <link rel="stylesheet" href="bootstrap/css/bootstrap-reboot.css" crossorigin="Anonymous"> <link rel="stylesheet" href="bootstrap/css/bootstrap-reboot.min.css" crossorigin="Anonymous">

– Adelino Vasconcelos

2017/12/20 at 10:51
One such CSS is conflicting with the original Bootstrap4 CDN CSS. And another thing, the "bootstrap-grid.min.css" and "bootstrap-grid.css" files are the same, you don’t need to index both. The difference is that .MIN.CSS is the minified version of CSS, but the two are the same, just call one of them on your page.

– hugocsl

2017/12/20 at 10:56

1 answer

Browser other questions tagged html css bootstrap-3 bootstrap-4

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2017-12-20T10:51:51+00:00

Check out your code running on BS4, did not present BUG, I just commented the <script> not to give error in the snippet stackoverflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
    
    <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="#"><img src="http://placeskull.com/16/16" alt="#" width="25" height="25"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav mr-auto">
                <li><a class="nav-link" href="#.php">#</a></li>
                <li><a class="nav-link" href="#.php">#</a></li>
                <!--li><a class="nav-link" href="#.php?id=">#</a></li-->
                <li><a class="nav-link" href="#.php">#</a></li>
                <li><a class="nav-link" href="#.php">#</a></li>
                <li><a class="nav-link" href="#.php">#</a></li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="password.php">Password</a>
                </li>
                <li clas="nav-item">
                    <?php 
                        date_default_timezone_set("Europe/Lisbon");
                        echo '<a class="nav-link">'.date("d-m-Y").'</a>';
                    ?>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo $logoutAction ?>">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
    
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>