s2Member styled login hides behind admin bar

Hey all,

Anybody willing to help me out? I’ve managed to create to some extend a copy of the s2Member login bar.

At first, it looked great and I was very chuffed with myself for achieving this, but the next day after configuration changes, which I haven’t noted :( , the menu bar appears to be hidden behind the admin bar. Maybe one of the gurus will spot my mistake…

This is evident when you do a refresh of the page, it is displayed for a brief moment before the admin menu is displayed showing “Login, Register to the left & the Quick search to the right” at the top of the page.

Followed the instructions and placed s2-login-box.php in the MU plugins folder. The box displays but need some styling. Positioning is not the issue. It’s all about hiding & displaying the box and appropriate menu. (java scripting I think)

Another challenge is to get the pop-up box to display on top of my slideshow video. It only display on the slideshow images.

Need assistance with,
1: Fixing my style sheet,
2: and creating the java script. I have NO clue how to create the java script to hide and display the credentials pop-up box and once logged in, display the user info menu bar. Still busy googling to find a script that I can modify.

As mentioned, I’m using the inFocus theme and s2Member plugin and here are some of my “borrowed” configuration files;

Style sheet:

#header { height: 112px !important;
}
#primary_menu { position: absolute !important; top: 25px !important; right: 160px !important; 
}
#header_extras {
    color: #AAAAAA;
    font-size: 10px;
    position: absolute;
    right: 0;
    top: 34px;
}
#s2-bar {
    background: url("/wp-content/uploads/bar.png") repeat-x scroll left top #151515;
    box-shadow: 0 1px 1px 1px #C0C0C0;
    font-size: 13px;
    height: 28px;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
#my-login-box a {
    color: #213C63;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 12px;
    width: 75px;
}
#my-login-box a ws-plugin--s2member-pro-login-widget-form {
    text-decoration: none;
}
#my-login-box {
    background-color: #E7E7E7;
    padding: 10px;
    width: 230px;
}
#my-login-box {
    background-color: #FFFFFF;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    box-shadow: 0 8px 6px -6px black;
    margin: 0 auto;
    position: fixed; z-index: 10; display: block; top: 26px; left: 312px;
    width: 200px;
}
div#s2-bar div.s2-inner-bar {
    margin: 3px auto 0;
    position: relative;
    width: 960px;
}
div#s2-bar * {
    color: #CCCCCC;
    text-shadow: 0 -1px 0 #444444;
}
div#s2-bar div.s2-user-info {
	left: 0;
	text-align: left;
}
div#s2-bar div.s2-user-info, div#s2-bar div.s2-version, div#s2-bar div.s2-top {
    position: absolute;
    top: 0;
}
div#s2-bar div.s2-version {
    right: 40px;
    text-align: right;
}
div#s2-bar div.s2-user-info a#s2-login-link {
    text-decoration: none;
}
div#s2-bar a {
    text-decoration: none;
}
div#s2-bar div.s2-user-info a#s2-login-link.s2-open {
    color: #FFFFFF;
}
div#s2-bar div.s2-user-info a#s2-login-link {
    text-decoration: none;
}
div#s2-bar div.s2-user-info a#s2-login-link.s2-open:before {
    color: #FFFFFF;
    content: "▲";
}
div#s2-bar div.s2-user-info a#s2-login-link:before {
    content: "▼";
    font-size: 90%;
    margin-right: 3px;
}
div#s2-bar div.s2-top {
    right: 0px;
    text-align: right;
}
div#sub_footer, div#sub_footer a {
    font-size: 11px;
}

“Additional Headers” inFocus :

<div id="s2-bar">
<div class="s2-inner-bar">
<div class="s2-user-info">
<a id="s2-login-link" title="Log In" href="https://mysite.com/wp-login.php?redirect_to=%2F">Log In</a>
|
<a title="MySite® Forums (Register Free)" href="https://mysite.com/register/?s2-ssl=yes">Forums</a>
</div>
</div>
</div>

Thank you in advance,
AJ

We’re very sorry for the delay in response.

Your account’s ticket didn’t come into our stream for some reason. We’re looking into it.

I believe the issue that you’re having is due to you using this lin: position: absolute;. I would recommend taking this out, but beyond that we really can’t help you debug your custom code on your site. If you need further assistance, we recommend http://jobs.wordpress.net, or another freelance web site where WordPress® experts are offering their expertise through a bid on your project.

Thank you Bruce,
I have tried your suggestion but without any luck :(

Since so many people request to have this feature, why don’t you just include it as a standard basic functionality? Everyone see it on your site and think that it can be customized just like all the other features. After all, I upgraded to get this pop-up functionality.

Just a suggestion, paste the code on your site for everyone to copy and past. This is not a request for customization, but rather the minimum required code to achieve the same result as seen on s2Member in combination with inFocus as per your suggestion.

I have been wasting 3 days trying to figure this out and this was one of the main reasons why I bought your plugin. Quite expensive if I have to employ someone else to do what the plugin was supposed to do.

Best regards,
AJ

Since so many people request to have this feature, why don’t you just include it as a standard basic functionality? Everyone see it on your site and think that it can be customized just like all the other features. After all, I upgraded to get this pop-up functionality.

If it were possible to include this as standard functionality we would definitely do so. However, this is a theme customization and unless your theme has a WordPress side/head/footer bar that you can add widgets to, it’s just not possible.

The code provided here is the bare necessity for getting the log in box like we have here at s2Member.com. As far as getting the form to toggle and not be shown, this is something that has to be done through JavaScript and will change based on what you want.

Knowledge Base » Login Box Like s2Member.com?

If you’ve got jQuery loading on your site, this jQuery function will do a lot of the work for you:

http://api.jquery.com/toggle/

Thank you Bruce, will have a look.