- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello Everyone,
I been working on one of my new website @
http://workstation.staging.wpengine.com/ I been working on creating STicky Welcome message for the visitor. After the welcome message was implemented the user has problem to click the primary navigation menu. The code for the same is as follows.
Style.css
/* Sticky Message
—————————————————————————————————- */
.sticky-message {
background-color: #333;
font-size: 16px;
opacity: 0;
padding-bottom: 20px;
padding-top: 20px;
position: fixed;
text-align: center;
width: 100%;
z-index: 999;
}
.sticky-message {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sticky-message.reveal {
opacity: 1;
}
.sticky-message,
.sticky-message a:hover,
.sticky-message p {
color: #fff;
}
.sticky-message a {
color: #999;
}
.sticky-message p:last-child {
margin-bottom: 0;
}
Thanks Everyone for taking your time to go through this.
Maybe try moving the z-index
like so:
.sticky-message {
/* stuff */
opacity: 0;
z-index: -1;
}
.sticky-message.reveal {
/* stuff */
opacity: 1;
z-index: 999;
}
it worked as miracle.
/* CSS = magical stuff */
;) , you’re welcome