Skip to content

Instantly share code, notes, and snippets.

@cannapages

cannapages/header.css.scss

Created April 15, 2013 22:21
Show Gist options
  • Save cannapages/5391761 to your computer and use it in GitHub Desktop.
Save cannapages/5391761 to your computer and use it in GitHub Desktop.
Download ZIP
Fixed nav html and css
Raw
header.css.scss
$header_height: 100px;
.header {
position: fixed;
width: 100%;
height: $header_height;
background-color: $light_blue;
.container {
position: relative;
width: 950px;
height: $header_height;
margin: auto;
overflow: visible;
.logo {
position: absolute;
top: 10px;
left: 0px;
width: 387px;
height: 85px;
background-image: url('/assets/logo.png');
}
.nav {
position: absolute;
top: 20px;
right: 21px;
height: 50px;
width: 500px;
font-size: 14px;
color: #FFFFFF;
background: url('/assets/main_nav.png') no-repeat left top;
ul {
list-style: none;
li {
&.current {
background: url('/assets/nv-hover.png') no-repeat right top;
color: #000000;
z-index: 5;
}
&:hover {
background: url('/assets/nv-hover.png') no-repeat right top;
color: #000000;
z-index: 5;
ul {
display: block;
position: absolute;
background: #f38d0d;
left: -70px;
width: 200px;
top: 48px;
z-index: 5;
padding: 10px;
@include border-radius(12px,12px);
li {
background: none !important;
padding: 0px 15px;
text-align: left;
float: left;
width: 127px;
border-bottom: 1px solid #ffb455;
z-index: 5;
}
}
}
float: left;
margin: 0px 0px 0px 0px;
padding: 12px 11px 18px 15px;
text-align: center;
position: relative;
background: url('/assets/sep.png') no-repeat right top;
a {
padding: 9px 0px;
color: white;
text-decoration: none;
span.arrow {
padding: 0px 15px 0px 0px;
background: url('/assets/arrow-white.png') no-repeat right top;
}
}
ul {
display: none;
}
}
}
}
.nav_right {
position: absolute;
top: 20px;
right: 0px;
background: url('/assets/main_nav.png') no-repeat right top;
height: 50px;
width: 21px;
}
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>OverSeaMe</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/main.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/lib/namespace.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.checkbox-toggler.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.dropdown-menu.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.popover.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/components/jquery.aa.table-checkbox-toggler.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/pages/application.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/pages/batch_actions.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/application.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin/base.js?body=1" type="text/javascript"></script>
<script src="/assets/active_admin.js?body=1" type="text/javascript"></script>
<script src="/assets/feeds.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="u4Zr6Jd31LrDNa/ZLbfXe5k/S88UNKjXgAgiCm2E09s=" name="csrf-token" />
</head>
<body>
<div class='header'>
<div class='container'>
<div class='logo'></div>
<div class='nav'>
<ul>
<li class='link'>
<a href="#"><img alt="Home" src="/assets/home.png" />
</a>
</li>
<li class='current'><a href="#">My Profile</a></li>
<li><a href="#">Zones</a></li>
<li>
<a href="#"><span class='arrow'>Travel</span>
<ul>
<li><a href="#">Housing</a></li>
<li><a href="#">Flights</a></li>
<li><a href="#">Language</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</a>
</li>
<li><a href="#">Connect</a></li>
<li>
<a href="#"><span class='arrow'>Account</span>
<ul>
<li><a href="#">Settings</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</a>
</li>
</ul>
</div>
<div class='nav_right'></div>
</div>
</div>
<div class='feeds full_width_container' id='feeds_index'>
<div class='feed_map'></div>
</div>
</body>
</html>
Raw
main.css.scss
@import "blue_print_import";
@import "partials/variables";
@import "partials/main_header";
body {
background-color: $dark_blue;
}
.container {
@include container;
}
.full_width_container {
width: 100%;
position: absolute;
top: 100px;
left: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment