XF 1.x Move the "Login or Sign up" button to the header

Russ

Pixel Exit Staff
You'll need to add the button inside ad_header template:

Code:
<div class="userLogin">
    <h3 id="loginBarHandle">
       <label for="LoginControl"><a href="{xen:link login}" class="<xen:if is="@xb_login_overlay OR @xb_alt_login">OverlayTrigger</xen:if> navLink">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
     </h3>
</div>
Then add CSS
Code:
.LoggedOut .visitorTabs { display: none; }
.userLogin { float: right; }
@media (max-width:@maxResponsiveWideWidth) {
.LoggedOut .visitorTabs { display: block; }
#logoBlock .userLogin { display: none; }
}
That's the gist of it... you'll need to make modifications on your own I'm sure.
 

Dylan

Customer
You'll need to add the button inside ad_header template:

Code:
<div class="userLogin">
    <h3 id="loginBarHandle">
       <label for="LoginControl"><a href="{xen:link login}" class="<xen:if is="@xb_login_overlay OR @xb_alt_login">OverlayTrigger</xen:if> navLink">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
     </h3>
</div>
Then add CSS
Code:
.LoggedOut .visitorTabs { display: none; }
.userLogin { float: right; }
@media (max-width:@maxResponsiveWideWidth) {
.LoggedOut .visitorTabs { display: block; }
#logoBlock .userLogin { display: none; }
}
That's the gist of it... you'll need to make modifications on your own I'm sure.
Hi, Russ,

Why it appears when I'm logged in?

Screenshot_1.png
 

Dylan

Customer
Okay, I've changed it to:
Code:
<xen:if is="{$visitor.user_id}">

<xen:else />

<div class="userLogin">
    <h3 id="loginBarHandle">
       <label for="LoginControl"><a href="{xen:link login}" class="<xen:if is="@xb_login_overlay OR @xb_alt_login">OverlayTrigger</xen:if> navLink">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
     </h3>
</div>

</xen:if>
 

Russ

Pixel Exit Staff
You can also use:

Code:
<xen:if is="!{$visitor.user_id}">
<div class="userLogin">
<h3 id="loginBarHandle">
<label for="LoginControl"><a href="{xen:link login}" class="<xen:if is="@xb_login_overlay OR @xb_alt_login">OverlayTrigger</xen:if> navLink">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
</h3>
</div>

</xen:if>
Same effect.
 

Dylan

Customer
You can also use:

Code:
<xen:if is="!{$visitor.user_id}">
<div class="userLogin">
<h3 id="loginBarHandle">
<label for="LoginControl"><a href="{xen:link login}" class="<xen:if is="@xb_login_overlay OR @xb_alt_login">OverlayTrigger</xen:if> navLink">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
</h3>
</div>

</xen:if>
Same effect.
When I remove the <xen:else />:

Screenshot_2.png

I took the example of the sidebar_visitor_panel template for the sign up button.
 

Dylan

Customer
Thanks for the help, Russ! You can see the result here. When my logo is placed in the center in responsive, another button is placed.
 

Dylan

Customer
Hi,

I've a problem on my iPhone 4S when I put it horizontally, the link (Login or Sign up) in the navigation disappears:

Vertically:

IMG_0091.PNG

Horizontally:

IMG_0092.PNG

I noticed that the link disappears to 500px in width:

Screenshot_1.png
 
Last edited:

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.