Shadow on header

Wappler General Need Help
1

I am trying to add a shadow on my header/navbar. If I apply a bootstrap shadow to the header nothing seems to happen.

1920×178

If I apply it to the Navbar it works but only covers the area of the navbar and leaves a space with no shadow on each side and is hidden behind the content.
1920×169

If I make a class using box-shadow and apply it to the header it seems to work but is still be hidden behind the content.
1920×199

I am basically trying to achieve what you see on the Wappler Community header

1898×101

Any advice on what I’m doing wrong/need to change would be appreciated!

2

Please post your whole page code here :slight_smile:

3

This is the code for the layout

    <!doctype html>

    <html>

    <head>

      <script src="/dmxAppConnect/dmxAppConnect.js"></script>

      <base href="/">

      <meta charset="UTF-8">

      <title>Untitled Document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />

      <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>

      <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />

      <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>

      <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>

      <link rel="stylesheet" href="/css/style.css" />

    </head>

    <body is="dmx-app" id="main">

      <header class="ps-gradient">

        <div class="container">

          <div class="row">

            <div class="col">

              <nav class="navbar navbar-expand-lg navbar-dark">

                <a class="navbar-brand ms-auto" href="#">Navbar</a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">

                  <span class="navbar-toggler-icon"></span>

                </button>

                <div class="collapse navbar-collapse" id="navbar1_collapse">

                  <div class="navbar-nav">

                    <a class="nav-item nav-link active" href="#">Home</a>

                    <a class="nav-item nav-link" href="#">About</a>

                    <a class="nav-item nav-link" href="#">Contact</a>

                  </div>

                </div>

              </nav>

            </div>

          </div>

        </div>

      </header>

      <main>

        <div is="dmx-view" id="content">

          <%- await include(content, locals); %></div>

      </main>

      <footer>

        <div class="container">

          <div class="row">

            <div class="col">

              <p>footer</p>

            </div>

          </div>

        </div>

      </footer>

      <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>

    </body>

    </html>

and then the index page just has a container row column

    <!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxFormatter:{}}" -->

    <div class="container-fluid ps-gradient">

        <div class="row">

            <div class="col">

                <h1>Fancy display heading</h1>

            </div>

        </div>

    </div>

    <meta name="ac:route" content="/">
4

So your screenshots are from the browser, when previewing the content page?

5

Yes, previewing the index page which is the second set of code I posted. I did add the gradient class after the screenshots but that was separate from the shadow issue and didn’t effect anything.

6

Can you also paste your css here, as i see you have some custom styling for the header?

7

I think the ps-gradient is the only relevant one and I added that later on for testing something else.

.ps-gradient {

    background-image: -webkit-gradient(linear, left top, right top, from(#1f75fe), to(#1C478C));

    background-image: linear-gradient(90deg, #1f75fe 0%, #1C478C 100%);}

.wave {

    aspect-ratio: 900/100;

    background-position: bottom;

    background-size: cover;

    background-repeat: no-repeat;

    background-image: url("../assets/images/wave-dark-91.svg"),-webkit-gradient(linear, left top, right top, from(#1f75fe), to(#1c478c));

    background-image: url("../assets/images/wave-dark-91.svg"),-webkit-gradient(linear, left top, right top, from(#1f75fe), to(#1c478c));

}

.wave2 {

    background-image: url("../assets/images/wave-dark-91.svg"),-webkit-gradient(linear, left top, right top, from(#1f75fe), to(#1c478c));

    background-image: url("../assets/images/wave-dark-91.svg"),-webkit-gradient(linear, left top, right top, from(#1f75fe), to(#1c478c));

}

.grad {

  background: url("../assets/images/wave-dark-91.svg") no-repeat bottom , -webkit-gradient(linear, left bottom, left top, from(#1f75fe), to(#1C478C));

  background: url("../assets/images/wave-dark-91.svg") no-repeat bottom , linear-gradient(0deg, #1f75fe 0%, #1C478C 100%);

}

.grad2 {

    background-position: bottom;

    aspect-ratio: 900/100;

    background-size: cover;

    background-repeat: no-repeat;

    background-image: url("../assets/images/wave-dark-91.svg");

    background-color: #1c478c;

}

.box-shadow1 {

    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 255, 0.3);

            box-shadow: 0 1rem 3rem rgba(0, 0, 255, 0.3);

}
8

Just add the Bootstrap .shadow class to your header like:

<header class="ps-gradient shadow">

and make sure to add a relative position to it either using the Bootstrap .position-relative class:

<header class="ps-gradient position-relative shadow">

or by referencing it in your CSS like:

header {
    position: relative;
}
1 Like
9

Once I added position-relative it worked. Thanks for the help!

1 Like
10

I was wondering if you could maybe explain why position: relative fixed it? I’m still new to CSS and I thought relative position is used in combination with top, bottom, left, and right to adjust the position. Why did adding it fix the shadow, or alternatively why did having the position static not work?

11

It has to do with how the browser renders the page. When you don’t have position relative it will just render them after each other. The heading is rendered after the nav with the shadow and it draws it over the shadow. So the shadow is rendered, but it is hidden under the heading. Having position relative creates a stacking context, the element will be rendered in a separate layer above the other content.

The stacking context - CSS: Cascading Style Sheets | MDN (mozilla.org)

3 Likes