Custom logo with link to homepage - css

Question

I have a trouble to add custom logo with link to navbar if we scroll down
is class "dropdown-menu dropdown-inverse"
site: 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;
}
here is the code full code :
<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

You could add another list element at start of your ul which holds the link
<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>
Then just use css to put your logo in front of it
.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*/
}
Example:
In case you want just a clickable logo image without text, wrap it inside the hyperlink <img src="#" /> and forget about the background-image in css.
EDIT:
If you want a fade-in effect when a user scrolls your page have a look at these two excellent jquery libraries which provide this functionality.
http://scrollmagic.io/
http://johnpolacek.github.io/scrollorama/
Alternative you can fade in with some jquery code. Therefore hide the logo (element) by setting it´s opacity to 0, detect the viewport scrolling and fade it in at some point. Find a working example here:
https://jsfiddle.net/mwtebtw9/1/
Code taken from: http://www.ordinarycoder.com/jquery-fade-content-scroll/