I'm in the process of redesigning a website and I've created a nav bar in CSS3. I would like to permanently fix that bar to the top of the page so that when scrolling it would always be right in front of you at the top. Here is the code so far:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*---------- BODY --------------------------------*/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: right;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height:80px;
padding: 0 10px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px;
/* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a {
color: white;
}
ul li:hover .dropdownContain {
top: 65px;
}
ul li:hover .underline {
border-bottom-color: #777;
}
ul li:hover .dropOut {
opacity: 1;
margin-top: 8px;
}
Also I was wondering how do you fix the links in the nav bar to be bold in CSS3? I tried using font-weight but that didn't seem to work and so I had to go into the HTML and bold each link individually. Any other suggestions on the nav bar would be greatly appreciated but not expected.
Here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav>
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
<li class="drop">
<a href="#"><strong>Contact</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>FAQs</strong></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><strong>Custom Drums</strong></a></li>
<li class="drop">
<a href="#"><strong>Drum Shows</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>PA Show</strong></li>
</ul>
</div>
</div>
</li>
<li class="drop">
<a href="#"><strong>Parts</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>Snare</strong></li>
<li><strong>Bass and Tom</strong></li>
<li><strong>Heads</strong></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><strong>Services</strong></a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
</body>
</html>
