How to make navbar collapse into hamburger. Bootstrap 4

HTML-CSS
1

I’m trying to get my Navbar to collapse into a the hamburger when the screen changes sizes to mobile, but I can’t get it to work. Here is my code and Codepen for just the Navbar

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tip Calculator</title>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous"> 
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700i" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <!-- CSS Link -->
    <link rel="stylesheet" href="styles.css">
   


</head>
<body>
    <nav class="navbar navbar-light fixed-top" style="background-color: #FFFFFF">
        <div class="container">
                <a href="" class="navbar-brand"><i class="fas fa-calculator mr-3"></i>Tip Calculator</a>
                <a class="nav-link active" href="#Intro">Info</a>
                <a class="nav-link" href="#Calc">Calculator</a>
                <a class="nav-link" href="#about">About</a>
        </div>
    </nav>

<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
3

If you want the Navbar to collapse into the toggler, you need to use the collapse component.

<nav class="navbar navbar-expand-sm fixed-top navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Tip Calculator</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link active" href="#Intro">Info</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#Calc">Calculator</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
4

hi there, I tried this navbar but it is not working on mobile, the hamburger menu is not opening up. not sure what to do with that.

5

Not sure which nav bar you are referring to, but did you include all the necessary files that bootstrap needs (CSS and JS)?

Also, we can’t help without seeing your code. Do you have a Codepen or something we can look at?

6

That sounds a lot like you didn’t include jQuery. You need jQuery to make the burger work, I believe.

And how about the bootstrap javascript file? Sometimes people just install the CSS and then don’t understand why things don’t work.