Пользовательские логотип со ссылкой на главную

Question

У меня есть проблемы, чтобы добавить свой логотип со ссылкой на NavBar если прокрутить вниз

является класс «выпадающий-выпадающее меню-обратный»

сайт: http://its-skin.upgates.com

CSS:

.secondlogo { 
background-image: url(http://static.its-skin.upgates.com/m/m57daee4256187-sublogo.png); 
width: 250px; 
height: 54px; 
margin-left: auto; 
margin-right: auto; 
} 

здесь код полный код:

<ul class="nav navbar-nav top-menu top-menu-categories"> 
    {else} 
     <ul class="dropdown-menu dropdown-inverse" data-designer="d1-2-2-1"> 
    {/if} 
     {foreach $tree as $category} 
      <li class="ct_{$category['category_id']} lev-{$level}{if $category['active']} active{/if}{if count($category['childs'])} dropdown{if $level > 1} dropdown-submenu{/if}{/if}" data-target-category="{$category['target_category_id']}"> 
       <a href="{$category['url']}"{if $category["blank_yn"]} target="_blank"{/if} class="TopMenuLink"> 
        {$category['name']} 
        {if (count($category['childs']))} 
         <i class="caret"></i> 
        {/if} 
       </a> 
       {if count($category['childs'])} 
        <button class="btn SubcategoriesLink"><i class="fa fa-chevron-right"></i></button> 
       {/if} 
       {include #desktopMenu tree => $category['childs'], level => $level + 1, option => false, colsCount => ceil(count($category['childs'])/$itemsInCol)} 
      </li> 
     {/foreach} 
    </ul> 

Answer 1

Вы могли бы добавить еще один элемент списка в начале вашего ул который содержит ссылку

<ul class="nav navbar-nav top-menu top-menu-categories"> 

    <!-- New Element with class logolink -->  
     <li class="ct_29 lev-1 logolink"> 
     <a href="http://its-skin.upgates.com/" class="TopMenuLink"> 
     Link     
     </a> 
     </li> 
     <li class="ct_29 lev-1" data-target-category="29"> 
     <a href="http://its-skin.upgates.com/krasa-it-s-skin" class="TopMenuLink"> 
     Krása It's Skin 
     </a> 
     </li> 
        ... 
     </ul> 

Тогда просто использовать CSS, чтобы поставить свой логотип перед ним

.logolink { 
    background-image: url(http://placehold.it/16x16/ff0000); 
    background-position: left center; 
    background-repeat: no-repeat; 
    padding-left: 20px; /* Adjust to your logo size*/ 
} 

Пример:

Если вы хотите просто щелкнуть изображение логотипа без текста, оберните его внутри гиперссылки <a href="#"><img src="#" /></a> и забудьте о задней панели round-image в css.

EDIT:

Если вы хотите, замирание в действие, когда пользователь прокручивает страницу вашей взглянуть на эти два отличных Jquery библиотеки, которые предоставляют эту функциональность.

• http://scrollmagic.io/
• http://johnpolacek.github.io/scrollorama/

Alternative вы можете исчезать с некоторым Jquery кодом. Поэтому скройте логотип (элемент), установив его непрозрачность на 0, обнаружив прокрутку видового экрана и вытрите его в какой-то момент. Найти рабочий пример здесь: https://jsfiddle.net/mwtebtw9/1/

Код взят из: http://www.ordinarycoder.com/jquery-fade-content-scroll/