CODEWITHSUNDEEP
htmlcsslaravelbootstrap-4
Dan E
Dan E

Reputation: 177

Div with white background is hiding the Bootstrap navbar shadow

I am using Bootstrap's navbar with .shadow-sm. I have two divs beneath it, one without background and the other one with a white background.

The shadow is showing as normal in the div with no background set, but being hidden by the white background.

<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="nav-brand" href="{{ url('/') }}">
                    Home
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        <li class="nav-item pr-md-4">
                            <a class="nav-link" href="#">Platform</a>
                        </li>
                        <li class="nav-item pr-md-4">
                            <a class="nav-link" href="#">Settings</a>
                        </li>

                        <div class="navbar-text border-left d-sm-none d-md-block pl-md-3"></div>
                    </ul>
                </div>
            </div>
        </nav>

        <main class="pb-4">
            <div class="container-fluid">

        <div class="row">

        <div class="col-md-3 left-panel pt-5 pr-4 d-none d-md-block text-right">
            Left menu
        </div>

        <div class="col-12 col-md-9 pt-5 px-4 center-panel">
            <div class="h1">
                Dashboard
            </div>
            <div class="row">
                <div class="col-12 col-md-6">
                    Welcome back!
                </div>
            </div>
        </div>

    </div>

</div>
        </main>
    </div>
</body>

html, body {
    font-family: $font-family-sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: normal;
    color: $textBlack;
    background: linear-gradient(180deg, #E9EDF3 0%, rgba(255, 255, 255, 0) 100%);
    min-height: 100%;
    margin: 0;
}

.left-panel {
    min-height: 100vh;
}

.center-panel {
    min-height: 100vh;
    background-color: white;
}

.content-panel {
    min-height: 100vh;
}

.right-panel {
    min-height: 100vh;
    background-color: white;
}

Can anyone see what I am doing wrong here? I've tried adding and removing padding and margins, but it seems as if the white background is overlaying the shadow.

The two panels are different colours, so I can't just remove the background and use the body background.

Upvotes: 0

Views: 442

Answers (1)

Henfs
Henfs

Reputation: 5411

It is happening because of the stack order of the elements.
The element with white background is in front of the navbar.

You can solve it just by placing the navbar element in the front with z-index:

nav {
  z-index: 1;
}

Upvotes: 2

Related Questions