Custom logo with link to homepage

Question

I have a trouble to add custom logo with link to navbar if we scroll down

is class "dropdown-menu dropdown-inverse"

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>

Where exactly do you like to have the Image? Can you Name the Navigation item or provide a Screenshot? And should the Image Link to somewhere else than the Navigation item? — Anatol, Sep 21 '16 at 05:38
Hi, thank you for reply! https://postimg.org/image/8cimh5sab/ and image is in the css (.secondlogo) — Thomas.D, Sep 21 '16 at 05:49

Anatol · Accepted Answer · 2016-09-22T10:08:01.310

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 <a href="#"><img src="#" /></a> 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.

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/

edited Sep 22 '16 at 10:08

answered Sep 21 '16 at 12:54

Anatol

1,923
6
26
55

Hi, thank you. My question is:is possible? i need to show this logo if i scroll down – Thomas.D Sep 22 '16 at 05:37
Hi thomas can you describe the wanted behavior with scoll down? Should the Logo stay on a fixed Position or only appear when you scoll down? – Anatol Sep 22 '16 at 05:50
Yes, only appear if i scroll down – Thomas.D Sep 22 '16 at 09:02
Hi Thomas I´ve edited my answer. Let me know if this is what you´re looking for. I assumed that you want to show the Logo without any other text. That´s why I kicked out the background-image css in the fiddle. Cheers, t-book – Anatol Sep 22 '16 at 10:09
Thank you so much, i try this – Thomas.D Sep 22 '16 at 10:33
Works, but i dont know how to implement jquery script to this system – Thomas.D Sep 22 '16 at 12:33
which system do you use? – Anatol Sep 22 '16 at 12:50
its a custom CMS - UPgates – Thomas.D Sep 22 '16 at 13:04
If you have access to the CMS Code have a look if you can find the templates. If it´s written in MVC pattern you´ll find most likely a folder called views or templates. Have a look there. Otherwise you can just open another question on how to add jquery to UPgates. – Anatol Sep 22 '16 at 13:08
check this: http://postimg.org/image/u9tgjmq6t/ and http://postimg.org/image/aczk8yt99/ – Thomas.D Sep 22 '16 at 13:10
and your question regarding your screenshots? – Anatol Sep 22 '16 at 13:12
other solution without jquery , like display: none; ? – Thomas.D Sep 22 '16 at 13:12
please check the sceenshots now – Thomas.D Sep 22 '16 at 13:13
The problem is you need to detect the User scolling. I´ve never read about a way doing this with pure css(3). Of course there are css3 transition effects but you need a way to fire them on a certain point. Here Javascript comes into play ... – Anatol Sep 22 '16 at 13:17
maybe one solution I see is if you have some element which you can use with hover, you could hide/show the logo see this post `http://stackoverflow.com/a/21176266/1474777` – Anatol Sep 22 '16 at 13:24
I dont understand what syntax is a solution in css , :hover? – Thomas.D Sep 22 '16 at 15:34
You're Page has jquery already loaded! You just need to find a way to add the Little Code snippet (fiddle) I have postet above to your Page. Is there some kind of Documentation of the cms or Support? – Anatol Sep 22 '16 at 19:49
Documents Unfortunely not founded – Thomas.D Sep 22 '16 at 19:55
I contacted the tech support, and we can do this for cash :) an we said "its close source system" – Thomas.D Sep 23 '16 at 07:35
Yes, i do this! now trouble if i scroll up the logo not hide :( – Thomas.D Sep 23 '16 at 11:11

Custom logo with link to homepage

1 Answers1