Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sticky Welcome Message in Workstation Pro
Tagged: Sticky Welcome Message, workstation pro
- This topic has 9 replies, 2 voices, and was last updated 8 years, 4 months ago by Amol.
-
AuthorPosts
-
November 8, 2015 at 5:05 am #170458AmolParticipant
Hi,
I have create Sticky Welcome message like Modern Studio Pro in Workstation Pro. Due to which i am unable to click the menu in the theme. Pls let me know whats wrong with the following code.
Function.php
//* Register sticky message widget area
genesis_register_sidebar( array(
'id' => 'sticky-message',
'name' => __( 'Sticky Message', 'bg-mobile-first' ),
'description' => __( 'This is the sticky message widget area.', 'bg-mobile-first' ),
) );//* Hook sticky message before site header
add_action( 'genesis_before', 'mobile_first_sticky_message' );
function mobile_first_sticky_message() {genesis_widget_area( 'sticky-message', array(
'before' => '<div class="sticky-message">',
'after' => '</div>',
) );}
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'mobile_first_sticky_message_scripts' );
function mobile_first_sticky_message_scripts() {wp_enqueue_script( 'mobile-first-stickey-message', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-message.js', array( 'jquery' ), '1.0.0' );
}
Sticky.js
jQuery(function( $ ){
// Add reveal class to sticky message after 100px
$(document).on("scroll", function(){if($(document).scrollTop() > 100){
$(".sticky-message").addClass("reveal");
} else {
$(".sticky-message").removeClass("reveal");
}
});
});
view rawStyle.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;
}Code coutsey :http://briangardner.com/genesis-sticky-message/
Thanks Everyone
What’s Beneath the Webface
November 8, 2015 at 6:29 am #170461Brad DaltonParticipantYou have 2 js errors. Where did you put the js files as they are not loading?
November 8, 2015 at 6:32 am #170462AmolParticipantThanks Braddalton,
The js file is loaded in Genesis Extender.
Thanks a lot
What’s Beneath the Webface
November 8, 2015 at 6:36 am #170463AmolParticipantjust uploaded the file to child theme js folder.
What’s Beneath the Webface
November 8, 2015 at 6:52 am #170464Brad DaltonParticipantNovember 8, 2015 at 7:07 am #170466AmolParticipantYes their is problem in all the browser. Tried to play around with code no luck.
Thanks once again
What’s Beneath the Webface
November 8, 2015 at 8:25 am #170470Brad DaltonParticipantNovember 10, 2015 at 8:36 am #170646AmolParticipantThanks found the code causing problem.
What’s Beneath the Webface
November 10, 2015 at 8:41 am #170648Brad DaltonParticipantReally? Do share because i want to use this solution on my own site. Thanks.
November 10, 2015 at 8:49 am #170650AmolParticipantThis reply has been marked as private. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.