Question posted in 
I had taken and found the following code for a navigation menu that I was interested in using however just had a quick question if anyone can help. What I am wanting to take and see if it was possible, was to take and make the color stretch to the top of the screen to fill the gap in the following code. Any help would be appreciated thanks in advance. Any questions let me know. Area in question is in the header area where it says “Some Text Here” wanting to go to the top of screen if possible for the color.
Here is the code
<!doctype html>
<html lang="en-US" prefix="og: http://ogp.me/ns#" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://w3bits.com/wp-content/themes/bits-v2/labs.css">
<title>Site Title Here</title>
<script>
var script = function(src) {
var e = document.createElement('script');
e.async = true;
e.src = src;
document.getElementsByTagName('head')[0].appendChild(e);
};
var style = function(css) {
var e = document.createElement('style');
if (e.styleSheet) {
e.styleSheet.cssText = css;
} else {
e.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(e);
}
var toggleDisplay = function(el, display, class_el) {
var EL = document.querySelector(el);
if (EL.style.display == display) {
EL.style.display = "none";
if (class_el) EL.classList.add(class_el);
} else {
EL.style.display = display;
if (class_el) EL.classList.add(class_el);
}
};
if (!showAds) {
setTimeout(function() {
var w = document.querySelector('.wrapper');
if (typeof ga !== 'undefined') {
ga('send', 'event', 'Adblock', 'Yes', {
'nonInteraction': 1
});
} else if (typeof _gaq !== 'undefined') {
_gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
}
var ab_a = document.createElement("div"),
w_p = w.parentNode;
w_p.classList.add("ab-active");
ab_a.setAttribute("class", "ab-alert");
w_p.parentNode.insertBefore(ab_a, w_p);
ab_a.innerHTML = '<p>I never intend to spoil your experience here, but this is important. I want to share with you that this website exists totally because of adverts money.</p><p>If you whitelist my website in your adblocker software, I won't show you more than two Google ads per page, and no popups. It's a promise.</p><p>Thanks for your patience :-)</p><p class="small" style="opacity: .75">This message disappears by itself in 15 seconds.</p>';
var ab = document.querySelector(".ab-alert");
document.documentElement.setAttribute("oncontextmenu", "return false");
style('.ab-alert{box-sizing:border-box;line-height:1.75}.site-wrapper{transition: opacity .5s ease-in-out;}.ab-active{ opacity: .0125; pointer-events: none;position:fixed;width:100%;}.ab-alert,.ab-active{user-select:none;}.ab-alert{opacity: 1;transition: opacity .5s ease-in-out;font-size: 15px;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;max-width: 450px; background-color: white; padding: 2.5em}');
setInterval(function() {
ab.style.opacity = "0";
ab.remove();
w_p.classList.remove("ab-active");
document.documentElement.removeAttribute("oncontextmenu");
}, 15000);
}, 1000);
}
script("//s3.buysellads.com/ac/bsa.js");
</script>
<!-- This site is optimized with the Yoast SEO plugin v5.9.1 - https://yoast.com/wordpress/plugins/seo/ -->
<link rel="canonical" href="http://w3bits.com/labs/css-responsive-nav/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="A CSS-only Touch-friendly Navigation Menu - W3Bits" />
<meta property="og:description" content="Navigation ▾ Sample Dropdown ▾ ▾ Item 1.1 Item 1.2 Item 1.3 Item 1.4 2-level DD ▾ ▾ Item 2.1 Item 2.2 ▸ ▾ Item 2.2.1 Item 2.2.2 Item 2.2.3 Item 2.3 Multiple Levels ▾ ▾ 3.1 ▸ ▾ 3.1.1 3.1.2 3.1.3 3.1.4 3.2 ▸ ▾ 3.2.1 3.2.2 3.2.3 3.3 ▸ ▾ 3.3.1 3.3.2 3.2.2 …" />
<meta property="og:url" content="http://w3bits.com/labs/css-responsive-nav/" />
<meta property="og:site_name" content="W3Bits" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Navigation ▾ Sample Dropdown ▾ ▾ Item 1.1 Item 1.2 Item 1.3 Item 1.4 2-level DD ▾ ▾ Item 2.1 Item 2.2 ▸ ▾ Item 2.2.1 Item 2.2.2 Item 2.2.3 Item 2.3 Multiple Levels ▾ ▾ 3.1 ▸ ▾ 3.1.1 3.1.2 3.1.3 3.1.4 3.2 ▸ ▾ 3.2.1 3.2.2 3.2.3 3.3 ▸ ▾ 3.3.1 3.3.2 3.2.2 […]" />
<meta name="twitter:title" content="A CSS-only Touch-friendly Navigation Menu - W3Bits" />
<meta name="twitter:site" content="@w3bits_" />
<meta name="twitter:creator" content="@w3bits_" />
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "WebSite",
"@id": "#website",
"url": "http://w3bits.com/",
"name": "W3Bits",
"potentialAction": {
"@type": "SearchAction",
"target": "http://w3bits.com/?s={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- / Yoast SEO plugin. -->
<link rel='dns-prefetch' href='//s.w.org' />
<link rel='https://api.w.org/' href='http://w3bits.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://w3bits.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://w3bits.com/wp-includes/wlwmanifest.xml" />
<link rel='shortlink' href='http://w3bits.com/?p=2474' />
<link rel="alternate" type="application/json+oembed" href="http://w3bits.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fw3bits.com%2Flabs%2Fcss-responsive-nav%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://w3bits.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fw3bits.com%2Flabs%2Fcss-responsive-nav%2F&format=xml" />
<link rel="stylesheet" href="http://w3bits.com/files/css/css-responsive-nav.css">
</head>
<body class="labs-template-default single single-labs postid-2474">
<div class="container">
<div class="wrapper">
<div class="bup" id="bup">
<style>
.w3bits-labs {
width: 468px;
height: 60px;
margin: 1.5em 0 0
}
@media(min-width: 728px) {
.w3bits-labs {
width: 728px !important;
height: 90px !important;
}
}
@media(max-width:727px) and (min-width: 468px) {
.w3bits-labs {
width: 468px !important;
height: 60px !important;
}
}
@media(max-width: 467px) and (min-width: 234px) {
.w3bits-labs {
width: 234px !important;
height: 60px !important;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- W3Bits Labs -->
<ins class="adsbygoogle w3bits-labs" style="display:block" data-ad-client="ca-pub-1581655830066906" data-ad-slot="9749450056" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="background:#0099cc; font-size:22px; text-align:center; color:#000; font-weight:bold; height:auto; padding-top:50px;">Some Text Here !!</div>
<div id="wrap">
<nav id="menu">
<label for="tm" id="toggle-menu">Navigation Menu <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm">
<ul class="main-menu cf">
<li><a href="#">Home</a></li>
<li><a href="#">Dropdown
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm0">▾</label>
</a>
<input type="checkbox" id="sm0">
<ul class="sub-menu">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
</ul>
</li>
<li><a href="#">2-level DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
</a>
<input type="checkbox" id="sm1">
<ul class="sub-menu">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
</a>
<input type="checkbox" id="sm2">
<ul class="sub-menu">
<li><a href="#">Item 2.2.1</a></li>
<li><a href="#">Item 2.2.2</a></li>
<li><a href="#">Item 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li><a href="#">Multiple Levels
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm3">▾</label>
</a>
<input type="checkbox" id="sm3">
<ul class="sub-menu">
<li><a href="">3.1
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm4">▾</label>
</a>
<input type="checkbox" id="sm4">
<ul class="sub-menu">
<li><a href="">3.1.1</a></li>
<li><a href="">3.1.2</a></li>
<li><a href="">3.1.3</a></li>
<li><a href="">3.1.4</a></li>
</ul>
</li>
<li><a href="">3.2
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm5">▾</label>
</a>
<input type="checkbox" id="sm5">
</a>
<ul class="sub-menu">
<li><a href="">3.2.1</a></li>
<li><a href="">3.2.2</a></li>
<li><a href="">3.2.3</a></li>
</ul>
</li>
<li><a href="">3.3
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
<input type="checkbox" id="sm6">
</a>
<ul class="sub-menu">
<li><a href="">3.3.1</a></li>
<li><a href="">3.3.2</a></li>
<li><a href="">3.2.2</a></li>
<li><a href="">3.3.4</a></li>
<li><a href="">3.3.5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sample #2</a></li>
<li><a href="#">Another DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm8">▾</label>
</a>
<input type="checkbox" id="sm8">
</a>
<ul class="sub-menu">
<li><a href="">4.1</a></li>
<li><a href="">4.2</a></li>
<li><a href="">4.2</a></li>
<li><a href="">4.4</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<nav class="cf lab-nav lab-nav--fixed lab-nav--bottom lab-nav--light">
<a href="http://w3bits.com/css-responsive-nav-menu/" title="Back to the article" class="lab-article-link">
<svg class="icon icon-right-open icon-reverse">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-right-open"></use>
</svg><span> Article</span></a>
<ul class="lab-share">
<li>
<a href="http://www.facebook.com/sharer/sharer.php?u=http://w3bits.com/css-responsive-nav-menu/" title="Share on Facebook">
<svg class="icon icon-facebook">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="https://twitter.com/intent/tweet?original_referer=http://w3bits.com/css-responsive-nav-menu/&text=$article_title&url=http://w3bits.com/css-responsive-nav-menu/&via=w3bits_" title="Tweet">
<svg class="icon icon-twitter">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="https://plus.google.com/share?url=http://w3bits.com/css-responsive-nav-menu/" title="Share on Google+">
<svg class="icon icon-gplus">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-gplus"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="javascript:void((function(d){var%20e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e)})(document));" title="Pin-it on Pinterest">
<svg class="icon icon-pinterest">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-pinterest"></use>
</svg>
</a>
</li>
<!--
-->
<li>
<a href="http://www.addthis.com/bookmark.php?url=http://w3bits.com/css-responsive-nav-menu/" class="share-link" rel="external nofollow" title="Share the love" target="_blank">
<svg class="icon icon-share">
<use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-share"></use>
</svg><span></span></a>
</li>
</ul>
</nav>
<a href="http://w3bits.com/follow/" class="lab-follow lab-follow--light"><svg class="icon icon-plus"><use xlink:href="http://w3bits.com/wp-content/themes/bits-v2/assets/img/icons.svg#icon-plus"></use></svg> Follow</a>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-10703354-8', 'w3bits.com');
ga('require', 'displayfeatures');
ga('send', 'pageview');
var toggle_menu = document.querySelector("#toggle_menu"),
toggle_search = document.querySelector("#toggle_search");
if (toggle_menu) {
toggle_menu.addEventListener("click", function() {
toggleDisplay("#main-nav", "block", false);
toggle_menu.classList.toggle("active");
toggle_menu.children[0].classList.toggle("icon-close");
}, false);
}
if (toggle_search) {
toggle_search.addEventListener("click", function() {
toggleDisplay("#search", "block", false);
toggle_search.classList.toggle("active");
toggle_search.children[0].classList.toggle("icon-close");
}, false);
}
</script>
<script type='text/javascript' src='http://w3bits.com/wp-content/themes/bits-v2/assets/js/prettify.js'></script>
<script type='text/javascript'>
prettyPrint()
</script>
</div>
</body>
</html>
2
Answers
Try
Let me know how it goes.
See it here:
https://jsfiddle.net/duqrqLpg/1/
There is google ads thats not loading at the very top and a div has a margin.
Do the following to get rid of the space above the site/page
1.Look for and delete the following:
2.Next your div with bup class and id has a margin. Remove the margin and you are good to go:
.bupcan found inlabs.css