• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Infinity Pro – Sticky Message widget

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Infinity Pro – Sticky Message widget

This topic is: resolved

Tagged: Infinity Pro, stick widget

  • This topic has 7 replies, 3 voices, and was last updated 6 years, 5 months ago by mike.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 18, 2017 at 4:48 pm #204960
    samara.albadri
    Member

    Hi all,

    I have added the sticky message as per Brian Gardner's instructions and it works https://briangardner.com/genesis-sticky-message/

    However doesn't show up properly upon scrolling down.

    Can someone please point me in the right direction on what I need to change to get it to show once scrolling, i'm stuck.

    Many thanks

    Samara

    https://samaraalbadri.com/
    April 18, 2017 at 10:31 pm #204970
    Brad Dalton
    Participant

    Increase the padding to padding-top: 120px;

    Line 2317 in style.css

    .sticky-message {
    	background-color: #deb0b0;
    	font-size: 16px;
    	opacity: 0;
    	padding-bottom: 20px;
    	padding-top: 120px;
    	position: fixed;
    	text-align: center;
    	width: 100%;
    	z-index: 999;
    }
    

    Or you could add a margin-top: 70px;

    .sticky-message {
    	background-color: #deb0b0;
    	font-size: 16px;
    	opacity: 0;
    	padding-bottom: 20px;
    	padding-top: 20px;
            margin-top: 70px;
    	position: fixed;
    	text-align: center;
    	width: 100%;
    	z-index: 999;
    }
    

    You'll also need CSS for Media Queries.

    @media only screen and (max-width: 800px) {
    
    	.sticky-message {
                padding-top: 20px;
        }
    
    }
    

    Also, don't forget to clear browser caching otherwise it might seem like the CSS doesn't work.


    Tutorials for StudioPress Themes & WooCommerce.

    April 19, 2017 at 1:59 am #204977
    Brad Dalton
    Participant

    Full tutorial, supported for members.


    Tutorials for StudioPress Themes & WooCommerce.

    April 19, 2017 at 3:16 am #204980
    samara.albadri
    Member

    Thank you for all your help, Brad. You are awesome! Much appreciated.

    April 19, 2017 at 3:32 am #204981
    Brad Dalton
    Participant

    Anytime.


    Tutorials for StudioPress Themes & WooCommerce.

    April 24, 2017 at 2:39 pm #205220
    mike
    Participant

    Hey Brad, I got this to work, but the nav menu no longer clings to the top as you scroll, there is the space there that the sticky message filled per screenshots below.
    Before scroll:
    null

    Scroll:

    Is there a simple fix to force the nav menu back up to the top as you scroll down? Thanks-

    April 24, 2017 at 2:42 pm #205221
    Brad Dalton
    Participant

    What theme are you using?


    Tutorials for StudioPress Themes & WooCommerce.

    April 24, 2017 at 2:45 pm #205223
    mike
    Participant

    Infinity Pro. I'm testing a preview site here.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Infinity Pro – Sticky Message widget’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble