Menu
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>
870
You can, of course, change the colors according to your preferences. For instance, if you would like the navbar to be more transparent, you need to lower the opacity coefficient from rgba(255, 255, 255, 0.2).
As soon as we place our cursor on links background colour changes. And to make our navigation tab transparent we set the alpha value in #rcba as 5. It is also known as opacity value.
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
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
