1

I have a fixed navbar and the site's background changes with sections (the sections background is diagonal). Now I want the background color of the navbar to change with the background of the underlying section's background color, without just setting the navbar's background color to the same color but the navbar to be transparent to the background but not it's content, like this:

example of how it should like

and not like that:

example of how it should NOT look like

I'm super thankful for any idea or approach on how to achieve something!

patrick
  • 11
  • 1

3 Answers3

0

If you want to keep the navbar on top all the time, change position to fixed and change set z-index to a high value so it is on top of all other elements, you may use the following CSS class for navbar. Of course, you can set the background-color and opacity to the values that match your background.

.myNavBar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
Jamal
  • 398
  • 4
  • 9
0

Without sharing some codes on how you are achieving the undesired results it might be hard to help you out.

Try this and it would work, I guess.

Within the container for the navbar, set the z-index in the CSS to a very high number, say 1999. This would make sure the navbar remains on top of other elements, assuming no other element has been set to have a z-index greater than 1999, in this case.

.navbar-container {
    z-index: 1999;
}
king
  • 273
  • 5
  • 8
0

Fading Content using Iframes (No JavaScript)

You will need to create an Iframe tag with the src attribute set to the content file you want to fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details are in the code below.

Demo: https://fadingiframe.netlify.app/

/* Index.html style style-sheet below */

iframe {
  position: absolute;
  top: 5rem;
  width: 100vw;
  height: calc(100vh - 6rem);
  border: none;
  -webkit-mask-image: linear-gradient( /* Mask iframe */
    transparent 1rem,
    #fff 5%,
    #fff 70%,
    transparent 90%
  );
  mask-image: linear-gradient(
    transparent 1rem,
    #fff 5%,
    #fff 70%,
    transparent 90%
  );
}

/* mainContent.html style style-sheet below */

body {
  position: absolute;
  overflow-x: hidden;
  margin-top: 2rem;
  color: aliceblue;
  width: 80vw;
  left: 5vw;
}

body::-webkit-scrollbar { /* Remove scroll bar */
  display: none;
}

body {
  -ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
  scrollbar-width: none;
}

p {
  padding: 2rem;
  font-size: 2rem;
}

  <body>
    <nav></nav>
    <iframe id="main-content-iframe" src="mainContent.html"></iframe> 
    <!-- Add iframe and src to main content html file -->
    <canvas id="canvas1"></canvas>
    <footer></footer>
  </body>
  
  
  
  
  <!-- Separate html file in root directory -->
    
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
  </head>
  <body>
    <section>
     <!-- Your Content here-->
    </section>
  </body>
</html>

-------------------------------------------------------------------------

For Text only -

Body Tag Has Special/Hide Properties

I think your issue is that you do not use the "body" element selector. It has unique properties that set the body element height to match the screen by default. Although it still allows scrolling the inner content. I add an extra background div for the text as well. It provides a better reading experience. Please have a look at my solution. It may help you solve your problem. If you have any questions, don't hesitate to ask.

Demo : https://jsfiddle.net/hexzero/5yjqk43a/

body {
  background-image: black;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

section {
  position: absolute;
  padding: 3rem 25%;
  background-image: Linear-gradient(
    transparent 6rem, <-- Should be the same as nav Height
    #fff 30%,         <-- Can set this to nav Height for abrupt cut-off
    #fff 70%,
    transparent 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-attachment: fixed;
  scroll-behavior: auto;
  z-index: 3;
}

nav {
  background: rgba(0, 0, 0, 0.616);
  width: 100%;
  position: fixed;
  top: 0;
  height: 6rem; <-- Navigation Height
  z-index: 4;
}

section > p {
  margin-top: 12rem;
  color: transparent;
}

.text-background {  <-- Remove this style section to have no background for the content,  
  width: 60%;       <-- along side the  <div class="text-background"></div> element 
  height: 100vh;
  right: 20%;
  position: fixed;
  top: 0;
  background-image: Linear-gradient(
    transparent 6rem,   <-- Background to nav height
    rgba(102, 51, 153, 0.924) 20%,
    rgba(102, 51, 153, 0.931) 90%,
    transparent 100%
  );
  z-index: 0;
}

canvas {
  width: 100%;
  background-color: rebeccapurple;
  position: fixed;
  top: 0;
  z-index: -1;
}

footer {
  position: fixed;
  width: 100%;
  height: 1rem;
  background: rebeccapurple;
  z-index: 1;
  bottom: 0;
}

p {
  font-size: 2rem;
}

Let me know if you would be interested in a JavaScript version for better browsers support. Thanks

Maxwell Archer
  • 422
  • 6
  • 15