CODEWITHSUNDEEP
htmlcssdrop-down-menusassbootstrap-4
Jack Finan
Jack Finan

Reputation: 109

Bootstrap dropdown menu not visible

I am trying to make a navbar with dropdowns using Bootstrap 4. When I click the dropdown link nothing happens. When I click the dropdown menu in chrome's dev tools it highlights the area where it should be, so it has expanded but is not visible. I followed the examples on w3schools closely, so I assume my css broke it. Can someone spot the problem?

My code is below and I also made a jsfiddle reproducing the error. You can see the top of the menu but it doesn't show past the bottom of the div.

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;

Upvotes: 1

Views: 4388

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362620

Remove overflow:hidden from the Navbar...

https://jsfiddle.net/r1k2e4xc/

Upvotes: 3

Trilok Kumar
Trilok Kumar

Reputation: 591

Remove the following css from the code. it is the reason your dropdown appear hidden.

@media (min-width: 576px)
.navbar-expand-sm .navbar-nav .dropdown-menu {
  /* position: absolute; */
}

I commented here the css causing the issue.

Upvotes: 0

Related Questions