I am trying to get my links in a ul to align with the image and text so I can have a good navbar, but for some reason it goes below everything. How can I fix this?
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
}
#logo {
padding: 10px 10px 10px 10px;
vertical-align: middle;
}
li,
a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
}
<nav>
<img src="https://s1.postimg.org/qiu818fhr/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
apply display:flex to nav and why not removing float:right from li as well?
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
}
#logo {
padding: 10px;
}
ul {
margin-left: auto;
}
li,
a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-flex;
}
<nav>
<img src="https://s1.postimg.org/qiu818fhr/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
You want to float the #nav-items list right, since that's a block element. Then display: inline-block on the li's, and color/text-decoration on the a's
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
}
#logo {
padding: 10px 10px 10px 10px;
vertical-align: middle;
}
#nav-items {
float: right;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LanguageBird</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav>
<img src="img/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
If you want to use a flex layout, apply display: flex; to nav, and use align-items to center vertically. Then assign margin-left: auto to #nav-items to push that menu to the right.
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
}
#logo {
padding: 10px 10px 10px 10px;
vertical-align: middle;
}
li {
display: inline-block;
}
a {
color: black;
text-decoration: none;
}
nav {
display: flex;
align-items: center;
}
#nav-items {
margin-left: auto;
}
<nav>
<img src="https://s1.postimg.org/qiu818fhr/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
Related
The shadow of my menu has a problem and when I click on the item that open a submenu , the shadow of opened submenu has a problem and it dosen't have any effect on the right of submenu that opened for the down item in the menu, what can I do ? I am too confused, I Appreciate it if you get the code instead of the link, thanks.
The Code:
ul {
/* border: 1px solid #555;*/
position:relative;
font-family: 'Roboto', sans-serif;
list-style: none;
padding: 0;
margin: 0;
background: #FFFFFF;
}
.borderm{
border-right:#606060 0.25px solid;
border-left:#606060 0.25px solid;
}
ul li {
position:relative;
text-align: center;
font-family: 'Roboto', sans-serif;
display: block;
position: relative;
float: right;
background: #FFFFFF;
}
/* This hides the dropdowns */
li ul { display: none;}
ul li a {
font-size: 13px;
font-family: 'Roboto', sans-serif;
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: black;
}
/* Display the dropdown */
li:hover > ul {
font-family: 'Roboto', sans-serif;
display: block;
position: absolute;
}
li:hover li { float: none;font-family: 'Roboto', sans-serif;}
li:hover li a:hover { background: #ff4718; color: white;font-family: 'Roboto', sans-serif;}
ul:hover ul{
-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
-moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
}
.main-navigation li ul li { border-top: 0;}
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
width: 105px;
font-family: 'Roboto', sans-serif;
right: 100.1%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
font-family: 'Roboto', sans-serif;
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both;font-family: 'Roboto', sans-serif;}
.expand{font-size:24px;float: left;margin: -9px -5px;}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.effect1{
-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
/*box-shadow: 1px 1px 0px grey;*/
}
.tri
{
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #555;
border-bottom: 25px solid transparent;
}
<nav id="bg1" class="navbar">
<ul class="main-navigation">
<li class="w3-center w3-animate-right effect1">Menu</p>
<ul class="effect1" style="right: 0%;">
<li class="w3-center w3-animate-right effect1" style="width: 150px;"><span class="expand">◂</span>Front End Design
<ul class="effect1">
<li class="w3-center w3-animate-right effect1">HTML</li>
<li class="w3-center w3-animate-right effect1"><span class="expand">◂</span>CSS
<ul class="effect1">
<li class="w3-center w3-animate-right effect1">Resets</li>
<li class="w3-center w3-animate-right effect1">Grids</li>
<li class="w3-center w3-animate-right effect1">Frameworks</li>
</ul>
</li>
<li class="w3-center w3-animate-right effect1"><span class="expand">◂</span>Javascript
<ul class="effect1">
<li class="w3-center w3-animate-right effect1">Ajax</li>
<li class="w3-center w3-animate-right effect1">jQuery</li>
</ul>
</li>
</ul>
</li>
<li class="w3-center w3-animate-right effect1">About Us</li>
</li>
</ul>
</li>
<!-- Header Nav End -->
</nav>
If you have so many uls in css, it will be the solution
ul ul ul {
z-index: 1;
}
I have a banner right above a navigation menu. The two have their own container divs going horizontally across the screen. I have box shadows on both of them to make it look like outer glow. The issue is that the shadow breaks(as it's meant to) between the banner and the navigation. Is there any way that I can modify my code to make it look like the shadows are one? Thanks for your time.
http://i.imgur.com/dJ69OyV.gif
My HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blah Blah</title>
<link href="assets/css/theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapperOuter">
<header>
<div id="bannerContainer">
<div id="banner">
<h1>Scott <span class="green">H.</span> Lacey</h1>
<p>Web Developer <span class="green">♠</span> Photographer <span class="green">♠</span> Musician</p>
</div>
</div>
<div id="toolbarContainer">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Services</li>
<li>Resume</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="toolbar">
<div id="social">
<label>Connect With</label>
<ul>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
</ul>
</div>
<div id="search">
<form action="#" method="POST">
<input type="text" name="searchCriteria" size="30" placeholder="Enter search text, then press enter.">
</form>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
span.green {
color: #66cc00;
}
body {
background: url(../img/bodyBackground.gif) repeat-x #000;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 1em;
color: #666666;
}
a {
color: #66cc00;
text-decoration: none;
border-bottom: 1px dotted #66cc00;
}
a:hover {
color: #666666;
}
#wrapperOuter {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
}
#bannerContainer {
background: url(../img/themeSprite.gif) 0 0px;
height: 148px;
border-bottom: 1px solid #333;
margin: 0;
padding: 0;
}
#banner {
background-image: url(../img/themeSprite.gif);
background-position: 0px -210px;
height: 148px;
margin: 0px auto;
width: 960px;
border-width: 0px 1px;
border-color: #666;
border-style: solid;
background-repeat: repeat-x;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5), 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 10px 10px 0px rgba(255, 255, 255, 0.2);
text-align: center;
}
#banner h1 {
margin: 0px;
padding-top: 25px;
}
#banner p {
color; #999;
}
#toolbarContainer {
background-color: #222;
border-bottom: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
margin: 0px;
padding: 0px;
}
nav {
background-image: url(../img/themeSprite.gif);
background-position: 0px -153px;
margin: 0px;
padding: 0px;
width: 960px;
margin: 0px auto;
height: 52px;
border: 1px solid #000;
box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 5px 15px 0px rgba(255, 255, 255, 0.2), 0px -5px 15px 0px rgba(0, 0, 0, 0.2);
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
display: inline;
border-left: 1px solid #333;
border-right: 1px solid #666;
height: 52px;
box-shadow: 15px 0 15px -2px rgba(0, 0, 0, .2);
}
nav ul li a {
display: block;
margin: 0px;
border-bottom: 0;
color: #333;
height: 52px;
padding: 15px 25px;
}
#toolbar {
width: 960px;
margin: 0px auto;
padding: 15px 0;
overflow: auto;
}
#social {
float: left;
}
#social label {
float: left;
display: block;
padding-right: 10px;
}
#social ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#social ul li {
float: left;
display: inline;
margin: 0px 5px;
padding: 0;
}
#social ul li a {
color: #666;
border: 0;
font-size: 18px;
}
#search {
float: right;
}
#search input {
background: #333;
border: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
color: #666;
padding: 10px;
}
Take the drop shadows off of .bannerContainer and .toolbarContainer, then place a div around the outside of both of those and add the drop shadow there. You will have to put the <div id="toolbar"> outside of this div too.
The answer is yes but you'd need to rewrite your code and place the nav menu and center head banner in a wrapping div element then apply the shadow to that element. Right now you have 2 elements which are going to be stacked on one another.
<html>
<head></head>
<style>
.main {
width: 100%;
}
.box1 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: red;
display: inline-block;
}
.box1inner {
margin: auto;
width: 70%;
height: 50px;
background: blue;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: orange;
display: inline-block;
}
.box2wrapper {
margin: auto;
width: 70%;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2inner {
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">
<div class="box1inner">
</div>
<div class="box1inner">
</div>
</div>
<div class="box2">
<div class="box2wrapper">
<div class="box2inner">
</div>
<div class="box2inner">
</div>
</div>
</div>
<div class="box3">
</div>
</div>
</body>
</html>
I am designing a project and i have faced a bug :
The design of the page ( especially the menu bar ) change on zooming
How can i prevent this ? Is there a shortage in my code ?
HTML Code
<html>
<head runat="server">
<title>Movie Guide</title>
<link href="StyleSheet.css" rel="stylesheet" />
<style>
#main {
text-align: center;
}
#main-menu-container {
text-align: center;
}
#main-menu {
display: inline-block;
width: 1024px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="text-align: center">
<img src="image.jpg" width="925" height="125" />
<div id="main-menu-container">
<div id="main-menu">
<div id="menubar">
<ul id="menu">
<li class="current">Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
CSS Code
body {
font: normal 80% Arial, Helvetica, sans-serif;
background: #23244e;
color: #000;
}
#menubar {
width: 920px;
height: 50px;
text-align: center;
margin: 0 auto;
background: #1D1D1D;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
ul#menu li {
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
ul#menu li a {
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
height: 24px;
margin: 10px 0 0 20px;
text-shadow: 0px -1px 0px #000;
padding: 6px 20px 0 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;
}
I haven't used css for a while so my apologies if this is not the correct solution, but I believe if you put under the main menu:
position:absolute;
the menu should no longer move
I am having trouble with this, I have looked through other peoples questions and answers I have found some helpful info however I am struggling to apply it to my menu. I am looking for my current menu which is pure CSS and HTML no other scripts or code to become fully responsive and mobile friendly. i.e. I want to make sure when the browser window size is reduced that the menu also gets smaller then to the point where it turns into the mobile button that you tap to expand.
I am hoping someone can show me the exact code I need to add to it with the correct class names etc. I have already tried and failed at this by trying to adapt other peoples answers. I am aware there are various places that will "build" one for free and give me the code however I want the desktop version of my menu to be 100% the same I just need it to scale properly to smaller screens.
I also do not want to use jquery javascript or anything else that is not HTML5 or CSS3, the code is inserted into my index.php and css into my external css file,
From my index page:
<!-- NAV-BAR-START -->
<div id="navbar"><div id='cssmenu'>
<ul>
<li><a href='/?p=home'><span>Home</span></a></li>
<li class='has-sub'><a href='/?p=gallery'><span>Gallery</span></a>
<ul>
<li><a href='/?p=photos'><span>Photos</span></a></li>
<li><a href='/?p=videos'><span>Videos</span></a></li>
<li><a href='/?p=audio'><span>Audio</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/?p=ian-milne'><span>Ian Milne</span></a>
<ul>
<li><a href='/?p=about'><span>About Ian</span></a></li>
<li><a href='/?p=testimonials'><span>Testimonials</span></a></li>
<li class='last'><a href='/?p=location'><span>Location</span></a></li>
</ul>
</li>
<li><a href='/?p=events'><span>Events</span></a></li>
<li><a href='/?p=bookings'><span>Bookings</span></a></li>
<li class='last'><a href='/?p=contact'><span>Contact</span></a></li>
< /ul>
</div></div>
<!-- NAV-BAR-END -->
And the associated CSS:
/* CSS DROPDOWN MENU */
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
text-align:center;
}
#cssmenu ul {
background: #000dfa;
height: 50px;
list-style: none;
margin: 0;
padding: 0;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1);
}
#cssmenu li {
float: none;
padding: 0px 0px 0px 15px;
display: inline-block;
}
#cssmenu li a {
color: #ffffff;
display: block;
font-weight: normal;
line-height: 50px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu li a:hover {
background: #000894;
color: #ff8400;
text-decoration: none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
#cssmenu ul li:hover a {
background: #000894;
color: #ff8400;
text-decoration: none;
}
#cssmenu li ul {
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px;
z-index: 200;
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px;
background: #000dfa;
/*this is where the rounded corners for the dropdown disappears*/
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 50px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover a {
border: 0px;
color: #ff8400;
text-decoration: none;
background: #000894;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
}
I have now put this into jsfiddle aswell for those who were asking
http://jsfiddle.net/GregTimeassistant/WLP8h/
You can style for each media query. Just copy/paste all your styles for each case.
You can resize your browser window so you can see the result for each media query.
Just experiment a lot, you will see that it is easy to customize your design for each aspect ratio.
#media (max-width: 600px) {
#cssmenu {
/*
copy styles here
*/
}
}
Check this example that covers a lot of devices (but needs some updating for new HD smartphones and tablets).
https://gist.github.com/marcobarbosa/798569
I'm using the Nathan Smith Grid System and everything I wrap with the "container_12" class has a white background. What I want is it to be transparent.
Example: http://jsfiddle.net/JordanSimps/RZvxn/1/
HTML:
<!-- Beginning of the blue top header -->
<div class="top-header-wrap">
<div class="container_12">
<div class="top-header">
<div class="grid_2">
<img class="hover" src="http://www.dubstepcast.com/images/phone.png" /> (586) 997-9490
</div>
<div class="grid_3">
<img src="http://www.dubstepcast.com/images/mail.png" /> info#experienceheritage.org
</div>
<div id="social">
<div class="grid_7">
<ul>
<li id="twitter"><img id="twitter" src="http://www.dubstepcast.com/images/twitter.png" /></li>
<li id="pinterest"><img id="pinterest" src="http://www.dubstepcast.com/images/pinterest.png" /></li>
<li id="facebook"><img id="facebook" src="http://www.dubstepcast.com/images/facebook.png" /></li>
<li id="google"><img id="google" src="http://www.dubstepcast.com/images/google.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of the blue top header -->
<!-- Beginning of the second header - Logo & Navigation buttons -->
<div class="container_12">
<div class="bottom-header">
<!-- LOGO BEGINS HERE -->
<div class="grid_2">
<p><img class="logo" src="http://www.dubstepcast.com/images/logo2.png" /></p>
</div>
<!-- LOGO ENDS HERE -->
<!-- NAVIGATION BUTTONS BEGIN HERE -->
<div class="grid_8 prefix_2">
<ul class='navbar navbar-horizontal'>
<a href="#" id="panel-1" class="drop-shadow raised">
Home
</a>
<a href="#" id="panel-2">
FAQ's
</a>
<a href="#" id="panel-3">
Invite
</a>
<a href="#" id="panel-4">
Contact
</a>
</ul>
</div>
<!-- NAVIGATION BUTTONS END HERE -->
</div>
</div>
<!-- End of the second header - Logo & Navigation buttons -->
CSS:
#charset "UTF-8";
/* CSS Document */
body {
background-image: url('http://www.dubstepcast.com/images/bg.jpg');
background-repeat: repeat-x repeat-y;
color: #333;
font-size: 11px;
height: auto;
padding-bottom: 20px;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
font-family: Georgia, serif;
font-weight: normal;
padding-top: 20px;
text-align: center;
}
h2 {
padding-top: 20px;
text-align: center;
}
p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
text-align: center;
}
/* HEADER */
/* TOP HEADER */
.top-header {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
background: #11A1B1;
height: 43px;
padding-top: 15px;
}
.top-header a {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
.top-header a:hover {
color: #D3582D;
text-decoration: none;
}
.top-header-wrap {
border-top: solid 3px #32BED0;
background: #11A1B1;
height: 58px;
}
/* SOCIAL ICONS */
#social {
height: 35px;
}
#social li {
display: inline;
}
/* TWITTER */
#social ul #twitter a {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
#social ul #twitter a:hover {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
/* PINTEREST */
#social ul #pinterest a {
background-image: url('http://www.dubstepcast.com/images/pinterest.png');
width: 18px;
height: 18px;
}
#social ul #pinterest a:hover {
background-image: url('http://www.dubstepcast.com/images/pinterest_active.png');
width: 18px;
height: 18px;
}
/* FACEBOOK */
#social {
text-align: right;
}
#social ul #facebook a {
background-image: url('http://www.dubstepcast.com/images/facebook.png');
width: 18px;
height: 18px;
}
#social ul #facebook a:hover {
background-image: url('http://www.dubstepcast.com/images/facebook_active.png');
width: 18px;
height: 18px;
}
/* GOOGLE */
#social ul #google a {
background-image: url('http://www.dubstepcast.com/images/google.png');
width: 18px;
height: 18px;
}
#social ul #google a:hover {
background-image: url('http://www.dubstepcast.com/images/google_active.png');
width: 18px;
height: 18px;
}
/* BOTTOM HEADER */
.bottom-header {
margin-top: 10px;
height: 155px;
}
.bottom-header img {
margin-top: 25px;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/*
* Kwicks: Sexy Sliding Panels for jQuery - v2.1.0
* http://devsmash.com/projects/navbar
*
* Copyright 2013 Jeremy Martin (jmar777)
* Contributors: Duke Speer (Duke3D)
* Released under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
.navbar {
height: 100px;
display: block;
list-style-type: none;
list-style: none;
position: relative;
margin: 55px 0 0 25px;
padding: 0;
}
.navbar > a {
font-weight: 400;
font-family: "Helvetica";
letter-spacing: 1px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
-moz-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
font-size: 16px;
width: 125px;
height: 18px;
margin-left: 5px;
float: left;
text-align: center;
padding: 25px 0 30px 0;
}
.navbar > a p {
font-family: "Helvetica";
font-weight: lighter;
color: #11A1B1;
margin-top: 4px;
font-size: 10px;
letter-spacing: normal;
}
.navbar > a:hover p {
color: #11A1B1;
}
.navbar > a:hover {
color: #D3582D;
}
.navbar > * {
display: block;
overflow: hidden;
padding: 0;
margin: 0;
}
.navbar.navbar-processed > * {
margin: 0;
position: absolute;
}
.navbar-horizontal > * {
float: left;
}
.navbar-horizontal > :first-child {
margin-left: 0;
}
.navbar-vertical > :first-child {
margin-top: 0;
}
#panel-1 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-2 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-3 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-4 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
/* GIVES THE DROP-SHADOW ON THE NAVIGATION BUTTONS MORE OF A REALISTIC LOOK */
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
According to your jsfiddle the following CSS rules are being applied to container_12 in the demo.css file
.container_12, .container_16, .container_24 {
background-color: #fff; /* Makes the background white */
background-repeat: repeat-y;
margin-bottom: 20px;
}
So you can either remove these or overwrite them with
.container_12 {
background: none
}
add this to css
.container_12{
background: transparent;
}
as per firebug, this is line 2 of demo.css
.container_12, .container_16, .container_24 {
background-color: #FFFFFF;
background-repeat: repeat-y;
margin-bottom: 20px;
}
so use
#div.container_12 {
background-color: transparent;
}
to override it with greater specificity
You have background-color: #fff; set in demo.css
Change it to background-color: transparent;