Reputation: 769

How do I make my nav bar slightly transparent?

I'm thinking i could make my website look a lot better by making the nav bar transparent, so you can see a slightly dimmed version of the image underneath it. I have not been able to find anything that tells me how to do this. Could someone help me please?

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
 body {
  margin: 0px
}
header {
  background: #000;
  color: white;
  padding: 5px 15px 0px 15px;
}
header h1 {
  font-size: 30px;
  margin: 0;
  display: inline;
  padding: 30px;
  font-family: 'Pacifico', cursive;
}
nav ul {
  margin: 0;
  display: inline;
  padding: 50px;
}
nav ul li {
  background: black;
  color: white;
  list-style-type: none;
  display: inline-block;
  padding: 20px 35px;
  margin: 0px;
  font-family: 'Patua One', cursive;
}
nav ul li:hover {
  color: #999;
}
#hero,
#hero1,
#hero2,
#hero3,
#hero4 {
  background-size: cover;
  position: relative;
  height: 100vh;
}
#hero {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/78975-Bread_Vol_6_No_3_zps6copbcw9.jpg);
}
#hero1 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg);
}
#hero2 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/c62d971b378c55d9d5d4eae139c1499f_zps0nqytwmn.jpg);
}
#hero3 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/553697_zpsfrh8bbhc.jpg);
}
#hero4 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg);
}
.header,
.header1,
.header2,
.header3,
.header4 {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 36px;
  -ms-transform: translate(0, -50%);
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Safari */
  transform: translate(0, -50%);
}
.ArtOfCakes {
  width: 300px;
  text-align: center;
}
#ArtOfCakesImage {
  width: 600;
  height: 600px;
  position: absolute;
  padding-left: 500px;
  padding-bottom: 100px;
}
#logo {
  font-size: 25px;
}
p {
  font-size: 20px;
}
h2 {
  font-size: 65px;
}

<! DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <header>
    <nav>
      <h1>Molino</h1>
      <ul>
        <li>Home</li>
        <li>Art Of Cakes</li>
        <li>Perfect Food</li>
        <li>Breakfast</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>
  <div>

  </div>
  <div id="wrapper">
    <div id="hero">
      <div class="header">
        <h1>Made with love</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
    <div id="hero1">
      <div class="header1">
        <h1>Art Of Cakes</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
    <div id="hero2">
      <div class="header2">
        <h1>Perfect Food</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
    <div id="hero3">
      <div class="header3">
        <h1>Breakfast</h1>
        <h3>7am Breakfast we're Open!</h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>

      </div>
    </div>
    <div id="hero4">
      <div class="header4">
        <h1>Specials</h1>
        <h3>7am Breakfast we're Open!</h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 5

Answers (4)

fabio_vac

Reputation: 614

You have to make the header "less solid" with:

background: rgba(0, 0, 0, 0.8);

or with:

opacity: 0.8;

You can read about the difference here: CSS opacity vs rgba: which one is better?

Remove ul e li color

Then you have to put the header upon the page with:

position: fixed;
z-index: 100;

If you want fixed position or

position: absolute;
z-index: 100;

if you want the header scrolling

And stretch the header with:

width: 100%;

Upvotes: 1

Harden Rahul

Reputation: 938

use this is looks nice when you scroll

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
 body {
  margin: 0px
}
header {
  background: rgba(0, 0, 0, 0.58);
  color: white;
  padding: 5px 15px 0px 15px;position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
header h1 {
  font-size: 30px;
  margin: 0;
  display: inline;
  padding: 30px;
  font-family: 'Pacifico', cursive;
}
nav ul {
  margin: 0;
  display: inline;
  padding: 50px;
}
nav ul li {
  color: white;
  list-style-type: none;
  display: inline-block;
  padding: 20px 35px;
  margin: 0px;
  font-family: 'Patua One', cursive;
}
nav ul li:hover {
  color: #999;
}
#hero,
#hero1,
#hero2,
#hero3,
#hero4 {
  background-size: cover;
  position: relative;
  height: 100vh;
}
#hero {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/78975-Bread_Vol_6_No_3_zps6copbcw9.jpg);
}
#hero1 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg);
}
#hero2 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/c62d971b378c55d9d5d4eae139c1499f_zps0nqytwmn.jpg);
}
#hero3 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/553697_zpsfrh8bbhc.jpg);
}
#hero4 {
  background-image: url(http://i1377.photobucket.com/albums/ah72/michaelbarley1/white-parchment-paper-texture_zpsiwfxaipb.jpg);
}
.header,
.header1,
.header2,
.header3,
.header4 {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 36px;
  -ms-transform: translate(0, -50%);
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Safari */
  transform: translate(0, -50%);
}
.ArtOfCakes {
  width: 300px;
  text-align: center;
}
#ArtOfCakesImage {
  width: 600;
  height: 600px;
  position: absolute;
  padding-left: 500px;
  padding-bottom: 100px;
}
#logo {
  font-size: 25px;
}
p {
  font-size: 20px;
}
h2 {
  font-size: 65px;
}

<! DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <header>
    <nav>
      <h1>Molino</h1>
      <ul>
        <li>Home</li>
        <li>Art Of Cakes</li>
        <li>Perfect Food</li>
        <li>Breakfast</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>
  <div>

  </div>
  <div id="wrapper">
    <div id="hero">
      <div class="header">
        <h1>Made with love</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
    <div id="hero1">
      <div class="header1">
        <h1>Art Of Cakes</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
    <div id="hero2">
      <div class="header2">
        <h1>Perfect Food</h1>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
    <div id="hero3">
      <div class="header3">
        <h1>Breakfast</h1>
        <h3>7am Breakfast we're Open!</h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>

      </div>
    </div>
    <div id="hero4">
      <div class="header4">
        <h1>Specials</h1>
        <h3>7am Breakfast we're Open!</h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci
          <br>tation ullamcorper suscipit lobortis nisl ut
          <br>aliquip ex ea commodo consequat. Duis
          <br>
        </p>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Pedram

Reputation: 16575

Well, you can do this:

header {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 15px 0px 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

use rgba background for transparent color and fixed position to fix it top of all contents. then you need to give it width: 100% and also remove ul li background color for better look.

jsFiddle Demo

Upvotes: 3

user2917245

Reputation:

You can set background color transparency with background: rgba(0,0,0,.3);

More about RGBa.

To move your image under the header add some css like:

header {
   position: absolute;
   z-index: 99;
}

JSFiddle Demo

Upvotes: 1

How do I make my nav bar slightly transparent?

Answers (4)

Related Questions