Coding:
<style type='text/css'>
#key2sticky {
background: #f76b0f; /* background colour */
color: #000; /* Text colour */
text-align: center;
margin: 0 auto;
border-top: 3px solid #E26A5C;
height: 35px;
font-size: 16px;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
/*border-top-left-radius: 10px; */
/* border-top-right-radius: 10px; */
display: flex;
/* font-weight: bold; */
/* font-family: "Arial"; */
font-color: #000;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 7px 0px 7px 0px;
}
#key2sticky:hover {background:#99f514;}
#key2sticky p {
line-height: 5px;
font-size: 15px;
text-align: center;
width: 95%;
float: left;
}
#key2sticky p a {
color: #000;
/* border: 2px solid #ffffff; */
padding: 6px;
margin-left: 10px;
background: #ffffff; /* Circle background colour */
border-radius: 30px;
font-weight: bold;
}
.k2cross-btn {
display: block;
position: relative;
right: 10px;
float: right;
}
.k2cross-btn a {
font-size: 18px;
font-weight: bold;
/* font-family: "Arial"; */
color: #ffffff;
line-height: 30px;
}
@media screen and (max-width: 480px){
#key2sticky p {
line-height: 4px;
font-size: 12px;
text-align: center;
float: left;
}
}
</style>
<div id='key2sticky'>
<p>Join Our What's Up Channel for Updates <a href='https://chat.whatsapp.com/I2RLTQwPEfG8OMqneTxlYL' target='_blank'>Click Here</a></p> <div class='k2cross-btn'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script>
function hide_cross() {
crosstbox = document.getElementById("key2sticky");
crosstbox.style.visibility = 'hidden';
}
</script>
0 Comments