Home/ Questions/Q 6568353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:28:02+00:00

what is the simplest way to create a thin email signup bar at the

  • 0

what is the simplest way to create a thin email signup bar at the top of the browser, that stays there as the user scrolls down and navigates to different pages?
i’m using wordpress and I already have jquery loaded, but haven’t programmed anything using jquery or wordpress yet.
i’ve been mostly a user up to now and know html, css and some php and javascript.
thanks
B

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just create a container div for the signup button and add it wherever you would like the button to appear (your page.php, single.php, index.php) or header.php to have it everywhere as another poster suggested. Here is a basic demo and some code that you can use:

    HTML

    <div class="signup">
    <a class="signupbtn" href="#" title="Sign up">Sign Up</a>
</div>

    CSS

    .signup {
    position:fixed;
    left:0;
    top:160px;
}

a.signupbtn {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-right: 10px;
}
a.signupbtn:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.signupbtn:active {
    color: #000;
    border-color: #444;
}

    And here’s a basic demo of the button in use:

    http://jsfiddle.net/andresilich/FAVK9/1/

    • 0