Mobiles Logo in der Navigation anzeigen

<div id="pageHeaderContainer" class="pageHeaderContainer">
    <header id="pageHeader" class="pageHeader">
        <div id="pageHeaderPanel" class="pageHeaderPanel">
            <div class="layoutBoundary">
            {include file='pageHeaderLogo'}
                
                {include file='pageHeaderMenu'}
                
                {include file='pageHeaderUser'}
            </div>
        </div>
        
        <div id="pageHeaderFacade" class="pageHeaderFacade">
            <div class="layoutBoundary">
            
            <div class="pageHeaderLogo2">
    
    <a href="{if PAGE_LOGO_LINK_TO_APP_DEFAULT}{link application=$__wcf->getActiveApplication()->getAbbreviation()}{/link}{else}{link}{/link}{/if}">
        <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogoMobile()}" alt="" class="pageHeaderLogoSmall">
        
    </a>
</div>
                
            </div>
                
                {include file='pageHeaderSearch'}
            </div>
        </div>
        
        <script data-relocate="true">
            require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
                UiPageHeaderFixed.init();
            });
        </script>
    </header>
    
    {hascontent}
        <div class="boxesHero">
            <div class="layoutBoundary">
                <div class="boxContainer">
                    {content}
                        {foreach from=$__wcf->getBoxHandler()->getBoxes('hero') item=box}
                            {@$box->render()}
                        {/foreach}
                    {/content}
                </div>
            </div>
        </div>
    {/hascontent}
</div>
{if "SLIDESHOW_STYLE_HEIGHT"|defined}
<script data-relocate="true">
    $(function () {
        var slideshowHeight = {SLIDESHOW_STYLE_HEIGHT|substr:0:-2}; 
         var image = $("#slideshow .slideshowItemList > li.slideshowItem .slideshowImage img");
        var navigationBar = $('#pageHeaderPanel');
        
        // skip all effects if no slideshow available
        if(!image.length) {
            return false;
        }
        
        // set menu to transparent
        $('.mainMenu .boxMenu > li > a').css('background-color', 'transparent');
        $('.userPanel > ul > li > a').css('background-color', 'transparent');
        
        var imageHeight = image.height();
        
        // set initial values
        var backgroundColor = 'background: rgba(45, 46, 48, 0)';
        var boxShadow = '0px 10px 6px -8px rgba(0, 0, 0, 0)';
        navigationBar.css('background-color', backgroundColor);
        navigationBar.css('box-shadow', boxShadow);
        
        calcScrollEffect();
        $(window).scroll(function () {
            calcScrollEffect();
        });
        
        function calcScrollEffect() {
            // navbar scroll effect
            var scrollTop = $(this).scrollTop();
            var opacity = 0;
            if (scrollTop < 101) {
                opacity = scrollTop / 100;
                if(navigationBar.hasClass('fullVisible')) {
                    navigationBar.removeClass('fullVisible')
                }
            } else {
                opacity = 1;
                if(!navigationBar.hasClass('fullVisible')) {
                    navigationBar.addClass('fullVisible')
                }
            }
            backgroundColor = 'background: rgba(45, 46, 48, ' + opacity + ')';
            boxShadow = '0px 10px 6px -8px rgba(0, 0, 0, ' + opacity / 3 + ')';
            navigationBar.css('background-color', backgroundColor);
            navigationBar.css('box-shadow', boxShadow);
            
            // header scroll effect 
            if(imageHeight > slideshowHeight) {
                 var bottom = ((imageHeight - slideshowHeight) * -1) + (scrollTop / 2);
                 if(bottom > 0) {
                    bottom = 0;
                 }
                $("#slideshow .slideshowItemList > li.slideshowItem .slideshowImage img").css("bottom", bottom + "px");
            }
        }
    });
</script>
{/if}

.pageContainer {
    height: 6%;
}

@media (max-width: 1024px) {
    .pageHeaderLogo2 .pageHeaderLogoSmall {
        display: block;
        max-height: 30px;
    }
    .pageContainer {
        height: 7%;
    }
}

@media (min-width: 1025px) {
    .pageHeaderLogo2 {
        display: none;
    }
}