How to stretch background color
Steve Stublaski
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>
Syfer
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:
<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>
2.Next your div with bup class and id has a margin. Remove the margin and you are good to go:
.bup {
margin: 0 auto 2.5em;
position: relative;
z-index: 9999;
display: flex;
justify-content: center;
}
.bup can found in labs.css
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: DOMXPath Query To Extract Specific li Element
- Next: Casting Function Return Type Based on Class Field
Related
Related Related
- 1
How to make a background color stretch to left and right of viewport in Safari Browsers
- 2
HorizontalContentAlign="Stretch" and change highlight background color in listbox Windows Phone 8
- 3
HTML/CSS - Navigation bar stretch/fill background color
- 4
h1 background color won't stretch to image width
- 5
HTML/CSS - Navigation bar stretch/fill background color
- 6
background color doesn't stretch full height of div
- 7
How to stretch a background image to full length of screen?
- 8
How to crop not stretch a background-image
- 9
How to stretch a static image as background in React Native?
- 10
how to make background image stretch vertically
- 11
How to make Footer background stretch the width of the screen
- 12
How to crop not stretch a background-image
- 13
How to apply a background color
- 14
css - how to stretch and auto-resize background image
- 15
css - how to stretch a background image across the entire window
- 16
How to make background SVG stretch 100% with cross browser support?
- 17
CSS: How to make background of an element stretch across the entire page?
- 18
How do you stretch a background image's width?
- 19
css - how to stretch a background image across the entire window
- 20
How to make background SVG stretch 100% with cross browser support?
- 21
How to do a darker background image in css3 and stretch it?
- 22
How to create a repeated scrollable background that does not stretch in WPF?
- 23
Stretch and scale CSS background
- 24
Stretch Background for View in Swift
- 25
Stretch iOS background image
- 26
Background Image Stretch On Homepage
- 27
Stretch background using xloadimage
- 28
Stretch Background for View in Swift
- 29
Background Image Stretch On Homepage
Comments