CODEWITHSUNDEEP
htmlcssbootstrap-4
sheldonm301
sheldonm301

Reputation: 19

Bootstrap-4 navbar dropdown-menu behind content

I am experimenting using a Bootstrap-4 theme to build a basic website. On all pages except ContactUs.php page, the navbar dropdown-menu is behind the content when clicked (when page viewed on a mobile device). Would appreciate any advice. http://i-aminc.com
http://i-aminc.com/bootstrap/css/bootstrap.css Note: still working on Video Ad Stand page so link does not work.

Upvotes: 0

Views: 1906

Answers (2)

Michael Trindade
Michael Trindade

Reputation: 1

If you are using the Bootstrap Studio 4 you can solve the problem of the drop menu hidden by disabling the option "Truncate" on "Navbar" options, if you do this the dropdown menu will show up instantly over the content of your website!

Upvotes: 0

David Liang
David Liang

Reputation: 21526

I don't know why but you have navbar wrap in a <div> with fixed height 75px. The reason why the dropdown-menu is behind the content is because of overflow.

2 fixes:

  1. If you do need to keep the fixed height 75px, then you need to apply styles to the div that is wrapped the navbar

    <body>
    <div class="idk">
        <nav class="navbar navbar-expand-md...">
        ...
    </div>
</body>

div.idk {
    height: 75px;
    position: relative;
    overflow-y: visible;
    z-index: 999;
}

  2. Just get rid of the div!

Upvotes: 1

Related Questions