Hey guys,
Working on a Sticky Banner for https://www.diysecuritycameras.com.au/DEV/
https://codepen.io/motion2082/pen/WjgdPJ
Having issues trimming the left and right sides to line up with the nav divs
Also on mobile it looks rubbish.
Can anyone please help me out?
Regards,
Motion
Hi there motion2082,
does this help…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#stickyTop {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
line-height: 1.75em;
padding: 0.3em 0.5em;
box-sizing: border-box;
background: #000;
font-family: roboto,sans-serif;
font-size: 1.45em;
font-weight: bold;
font-style: italic;
color: #fff;
text-transform: uppercase;
text-align: center;
}
#stickyTop a {
display: inline-block;
width: 13em;
margin: 0.25em 0.5em ;
background: #c33;
font: bold 0.6em/2em arial,helvetica,sans-serif;
color: #fff;
}
@media screen and ( max-width: 42em ) {
#stickyTop a {
display: block;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div id="stickyTop">
Get Your 5% Discount Voucher
<a href="../login?back=my-account">Sign Up To Claim Now</a>
</div>
</body>
</html>coothead
Hi Coothead,
I believe this fixes the mobile responsive issue but maybe the button css is interfering
Also notice the overlap now over the logo at https://www.diysecuritycameras.com.au/DEV/
.btn.button {
overflow: hidden;
padding: 9px 13px;
font: bold 14px/18px Arial,Helvetica,sans-serif;
text-transform: uppercase;
color: #fff;
background: #cc3333;
border: none;
border-bottom: 1px solid #805412;
white-space: normal;
}
Hi there motion2082,
what has the code that I posted got to do with this link…
https://www.diysecuritycameras.com.au/DEV/
You have not added it to that document. 
Can you elucidate?
coothead
Hi Coothead,
Trying to integrate this code with https://www.diysecuritycameras.com.au/DEV/
Can’t add it to codepen as there is way too much going on in the theme
Regards,
Motion
Hi there motion2082,
does this help…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<meta name="keywords" content="DIY Security Cameras,Hikvision,Sydney,IP Cameras,NVRs,DVRs">
<meta name="robots" content="index,follow">
<title>DIY Security Cameras Systems - DIY Security Cameras</title>
<link rel="shortcut icon" href="/DEV/img/favicon.ico">
<link href="https://www.diysecuritycameras.com.au/DEV/themes/diysecuritycameras/css/maintenance.css" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" >
<style media="screen">
body {
margin: 0;
background: #000;
}
.stickyTop {
position: fixed;
top: 0;
left: 0;
width: 100%;
line-height: 1.75em;
padding: 0.3em 0.5em;
box-sizing: border-box;
z-index: 10000;
background: #000;
font-family: roboto,sans-serif;
font-size: 1.45em;
font-weight: bold;
font-style: italic;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.stickyTop a {
display: inline-block;
width: 13em;
margin: 0.25em 0.5em ;
background: #c33;
font: bold 0.6em/2em arial,helvetica,sans-serif;
color: #fff;
}
.hidden {
position:static;
}
@media screen and ( max-width: 42em ) {
#stickyTop a {
display: block;
margin: 0 auto;
}
}
</style>
</head>
<body>
<!-- **************************** stickyTop **************************** -->
<div class="stickyTop">
Get Your 5% Discount Voucher
<a href="../login?back=my-account">Sign Up To Claim Now</a>
</div>
<div class="stickyTop hidden">
Get Your 5% Discount Voucher
<a href="../login?back=my-account">Sign Up To Claim Now</a>
</div>
<!-- ******************************************************************* -->
<div class="container">
<div id="maintenance">
<div class="logo">
<img src="https://www.diysecuritycameras.com.au/DEV/img/diy-security-cameras-logo-1429968454.jpg" width="300" height="138" alt="logo">
</div>
<div id="message">
<h1 class="maintenance-heading">Is currently in Maintenance mode</h1>
In order to perform some website maintenance, DIY Security Cameras will be temporarily offline.<br>
We apologize for the inconvenience and ask that you please try again later. <br>
For any urgent matters please email us at <a style="color:#CCCCCC" href="mailto:sales@diysecuritycameras.com.au" target="blank">sales@diysecuritycameras.com.au</a>
</div>
</div>
</div>
</body>
</html>coothead
Hi Coothead,
I will take the DEV site out of Maintenance mode, might make it easier for you to see what’s going on
Hi Coothead,
Thank you for helping me with this one. I really really appreciate it
That has done the trick. It’s above the logo and scales well on mobile devices.
What is that position:static rule? I have never seen that one before
Regards,
Motion
The “static” rule lets the element use it’s normal behavior.
In this instance it cancels the “position :fixed” which was
previously set here…
.stickyTop,.stickyTop1{
position: fixed;…and the element now returns to it’s normal status of “display:block”
It is this element which causes the page content to always move below
the “position :fixed” element. 
coothead
Wow that’s clever 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.