Solari

Active Member
Greets,

I'm really enjoying playing around with this style!

I noticed when going mobile, the logo pops out into its own bar. How do I prevent this as it doesn't look very good. I'd think the logo is small enough to stay in the existing navigation bar? See attached.

Thanks!
Ray
 

Attachments

  • Attachment0 2.jpeg
    Attachment0 2.jpeg
    152.7 KB · Views: 27
2 steps:

open template: xb_offcanvas_controls

Replace entire contents with:

Code:
<div class="xbOffCanvasControls">
        <a href="{$logoLink}" class="xbOffCanvasLogo">
            <img src="@headerLogoPath" class="desktopLogo" alt="{$xenOptions.boardTitle}" />
        </a>
    <a onclick="return false;" class="slideLeft xbOffCanvasToggle" href="#"><i class="fa fa-bars fa-fw"></i> <span class="menuText">{xen:phrase 'menu'}</span></a>
    <xen:if is="@xb_offcanvas_menu_newposts"><a href="{xen:link find-new/posts}" rel="nofollow" class="xbOffCanvasNew Tooltip" title="{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}"> <i class="fa fa-bolt fa-fw"></i><span>{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</span></a></xen:if>

    <xen:comment>
    <a href="customLink" rel="nofollow" class="xbOffCanvasNew"><i class="fa fa-cog fa-fw"></i><span>Custom Link Text</span></a>
    </xen:comment>

</div>

Add this in extra.css:

Code:
a.xbOffCanvasLogo
{
    float: left;
    display: none;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
}
a.xbOffCanvasLogo img
{
    max-height: 35px;
    display: inline-block;
    vertical-align: middle;
}
@media (max-width:@maxResponsiveWideWidth) { .Responsive #logoBlock {display:none;} .Responsive a.xbOffCanvasLogo { display: inline-block; } }
 

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.

Back