Giacomo Lawrance Giacomo Lawrance - 1 year ago 129
CSS Question

Header is transparent at the top

I'm having a lot of trouble stopping my header from going transparent whilst scrolling down the page. I'm not sure what is causing it (I used a template), but you can view the code here:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>IF-Charts - Charts and Plates for Flight Simulation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="css/etline-font.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a> to improve your experience.</p>
<section class="hero">
<section class="navigation">
<div class="header-content">

<div class="header-nav">
<ul class="primary-nav">
<li><a href="index.html">Home</a></li>
<li><a href="ifcharts.html">IF-Charts</a></li>
<li><a href="learnmore.html">Learn More</a></li>
<li><a href="contact.html">Contact</a></li>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<p class="intro">Plan your flight with plates.</p>
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>Plan your flight</h3>
<p>Select the airport you would like charts for. Want to learn how to use charts? Check out the <a href="tutorial.html">tutorial</a>. PLEASE NOTE THAT THESE CHARTS ARE NOT FOR OPERATIONAL USE!</p>
<div class="fb-like" data-href="" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>

<div align="center">
<h2>Please choose:</h2>
<br />


<a href="charts_depart.html"><img src="img/takeoff-the-plane.png" alt="Departures" style="width:80px;height:80px;border:0;"></a>

<a href="charts_arrive.html"><img src="img/plane-landing.png" alt="Arrivals" style="width:80px;height:80px;border:0;"></a>

<p>View all charts <a href="ifcharts-old.html">here</a>.
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
<a href="">Licence</a> | <p><p>By Giacomo Lawrance.</p>
<script src=""></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="bower_components/retina.js/dist/retina.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="bower_components/classie/classie.js"></script>
<script src="bower_components/jquery-waypoints/lib/jquery.waypoints.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;

I think it has to do with the CSS, but I am not sure.

The problem is that when at the top, the menu items cannot be seen. I just want the header to stay black. You can see the problem here:

Answer Source

In your scripts.js file there is a function that adds or removes several things on scroll.

/***************** Header BG Scroll ******************/

    $(function() {
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 20) {
                    "border-bottom": "none",
                    "padding": "35px 0"
                $('header .member-actions').css({
                    "top": "26px",
                $('header .navicon').css({
                    "top": "34px",
            } else {
                    "border-bottom": "solid 1px rgba(255, 255, 255, 0.2)",
                    "padding": "50px 0"
                $('header .member-actions').css({
                    "top": "41px",
                $('header .navicon').css({
                    "top": "48px",

Remove this function entirely.


<section class="navigation">


<section class="navigation fixed">

If you want to use the other properties as well add them to the following classes in the CSS file.

header {
  border-bottom: none;
  padding: 35px 0;

header .member-actions {
  top: 26px;

header .navicon {
  top: 34px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download