Move the "Login or Sign up" button to the header

[Dylan]

Hi,

I'd like to know how would be possible to move the "Login or Sign up" button to the header and in responsive, put the link in the navigation on Core:

An example: http://screencast.com/t/maU0s17DCN2o

Thanks.

 

[Russ]

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

<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

.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]

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

<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

.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?

 

[Dylan]

Okay, I've changed it to:

<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]

You can also use:

<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]

You can also use:

<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 />:



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

 

[Dylan]

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]

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:



Horizontally:



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

 

[Russ]

It seems to be loading fine for me, I'll try to replicate it again in a bit.

 

[Dylan]

It seems to be loading fine for me, I'll try to replicate it again in a bit.

The link disappears only when we come to 500px, but this is nothing. Don't bother with it.