Giacomo Lawrance Giacomo Lawrance - 16 days ago 6
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:

https://github.com/IF-Apps/IF-Charts

<!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]-->
<head>
<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="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<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); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">

<div class="header-nav">
<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>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<h1>IF-Charts</h1>
<p class="intro">Plan your flight with plates.</p>
</div>
</div>
</div>
</div>
</section>
<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>
<br>
<div class="fb-like" data-href="https://www.facebook.com/IF-Charts-1233474450057832/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> <br> <br>
<br>

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

<span>

<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>

</span>
<p>View all charts <a href="ifcharts-old.html">here</a>.
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="footer-links">
<a href="https://github.com/GiacomoLaw/IF-Charts/blob/master/LICENSE">Licence</a> | <p><p>By Giacomo Lawrance.</p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>


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:

https://if-charts.000webhostapp.com/

Answer

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) {
                $('section.navigation').addClass('fixed');
                $('header').css({
                    "border-bottom": "none",
                    "padding": "35px 0"
                });
                $('header .member-actions').css({
                    "top": "26px",
                });
                $('header .navicon').css({
                    "top": "34px",
                });
            } else {
                $('section.navigation').removeClass('fixed');
                $('header').css({
                    "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.

Change

<section class="navigation">

To

<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;
}