Attempting to create a navbar with dropdowns using Bootstrap 4. After clicking the dropdown link, nothing is happening. Highlighting the dropdown menu in Chrome's dev tools shows that it has expanded but is not visible. Followed examples on w3schools closely, so assuming the CSS might be causing the issue. Any ideas on what could be wrong?
The code is provided below, and an jsfiddle has been created to replicate the error. The top of the menu can be seen, but it does not extend beyond the div's bottom.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="container" id="main-container">
<div class="header row">
<h1 class="col-md-4">
<a href="#" title="Home page">
<img src="images/logo.png" />
</a>
</h1>
<div class="col-md-8">
<nav class="navbar navbar-expand-sm">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Link 1</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1a</a>
<a class="dropdown-item" href="#">Link 1b</a>
<a class="dropdown-item" href="#">Link 1c</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Sass:
body
background-color: #ddd;
#main-container
background-color: #fff;
margin-top: 10px;
border-radius: 20px 20px 0 0;
.header
position: relative;
margin: 0 10px 20px 10px;
border-bottom: 3px solid #444;
h1
margin: 0;
.navbar
overflow: hidden;
background-color: #333;
font-family: Arial;
position: absolute;
right: 0;
bottom: 0;
padding: 0;
background-color: #fff;
.navbar-expand-sm
.navbar-nav
.nav-link
color: #444;
text-align: centre;
text-decotation: none;
font-size: 17px;
padding: 13px 16px 9px 16px;
border-radius: 16px 16px 0 0;
&:hover
background-color: #444;
color: #e5e5e5;