Small Logo in Sticky Menu

Hello,

Is it possible to add small logo in sticky menu, floating extreme left?

Kindly suggest how to do that.

Thanks in advance.

- Pratik

Hi Patrik,
You must go to "_Root.cshtml" view and create new element which must hold your logo ( look the example below).

In the markup add link with random class:

<a href="" class="small-logo"></>

Inside the 'href' attribute add the code from the normal logo element which you must find in the 'Header.cshtml' view (must be something like:

<a href="@Url.RouteUrl("homepage")">

).
Finally you must add some css styling for the logo (probably in the css file which is responsible for mobile resolution like):

.small-logo{display:inline-block; with:45px; height:45px; background-image:url('the path to the logo image goes here')no-repeat center;}

This must works properly for you. So adding manually html element <a> which is 'hyperlink', make it to leads you to the homepage, then add some proper styles like image/logo, width/height and position (last one can be done by float, display inline-block, position:static, absolute, fixed, related and so long).

Hello Peter,

Thank you for your reply; 

As I see, you have suggested to add logo element in _Root.cshtml, but I think the sticky menu is triggered by mega menu plugin and not via this file. I don't see any entries regarding sticky menu in _Root.cshtml.

Kindly suggest.

-Pratik

For e.g. Currently I have this...

http://www.corelinsight.com/forum_media/nop-1.jpg

When visitor scrolls down the page and sticky menu is triggered, I want something like this...

http://www.corelinsight.com/forum_media/nop-2.jpg

Hi,

I tried everything, but unfortunately I am not able to get it working :(.

I might be asking for too much but can you guide where exactly should I add this line in _Root.cshtml?

<a href="@Url.RouteUrl("HomePage")" class="small-logo">

I have sent you a PM with my temporary store URL, if you can have a look at it...

- Pratik

Hi there,
This is what I did and it works properly.
First in the file _Root.cshtml   ("~\Presentation\Nop.Web\Themes\theme name\Views\Shared\_Root.cshtml" ) I have added element 'div' with class 'small-logo-icon' (look the samples below).

<div class="small-logo-icon">
                <a href="@Url.RouteUrl("HomePage")" class="logo">
                    
                </a>

            </div>

<div class="responsive-nav-wrapper">
            <div class="small-logo-icon">
                <a href="@Url.RouteUrl("HomePage")" class="logo"></a>
            </div>
            <div class="menu-title">
                <span>@T("SevenSpikes.Themes.Common.MenuTitle")</span>
            </div>
            <div class="search-wrap">
                <span>@T("Search")</span>
            </div>
            <div class="shopping-cart-link">
                <a href="@Url.RouteUrl("ShoppingCart")">@T("ShoppingCart")</a>
            </div>
            <div class="filters-button">
                <span>@T("SevenSpikes.Themes.Common.Filters")</span>
            </div>
            <div class="personal-button" id="header-links-opener">
                <span>@T("SevenSpikes.Themes.Common.Personal")</span>
            </div>
        </div>

Then I just added some styles in the 'mobile-only.css' file, to show the logo and float it left:

.responsive-nav-wrapper .small-logo-icon {
    background: rgba(0, 0, 0, 0) url("../img/new-small-logo.png") no-repeat scroll center center;
    float: left;
}

Of course you can use your normal logo (or completely new one) just set it different styles like 'background-size:50px;' and of course show the way to the image  using 'background-image' style (example: 'background-image:url('here write down the way and the name of the image.png')').

.small-logo-icon {
    background: rgba(0, 0, 0, 0) url("/Themes/allure/Content/img/logo.png") no-repeat scroll center center / 50px auto;
    float: left;
}

This is shorthand code that I have used to styled this logo and it must work for you.  

If you are not able to deal with this, please submit a ticket in our website.

Hi Peter,

Thank you for all the support;

I am able to see the small logo in mobile site but not on desktop pc. Probably something to do with responsive thing. I am not placing the css in right area. Will play around with it and see where the problem lies.

Many thanks.

- Pratik

Hi Pratic,

Every '.css' file has his purpose:
for example '980.css' file is for styles in desktop resolution and every styles in this file will apply to the website if customers use viewport bigger than 980 pixels. There is one global file which contain styles for all the resolution and  this is 'styles.css' file. The file 'mobile-only.css' is for mobile devices only (of resolution smaller than 980 pixels). So if you want your logo to be visible in all the resolution you must add the styles in the 'styles.css' file, if you want it only on mobile devices - use 'mobile-only.css', and if you have other preferences take a look in the other css files. '480.css' is for devices bigger than 480 pixels (which is pretty common for mobile phones). Actually I thought you want to have it only on smaller devices but not on the desktop (that`s why I told you to place it in the 'mobile-only' file). If you want it everywhere - use 'styles.css' file.

Hi Peter,

I have tried everything to my knowledge and also as per your guidance; but not able to get small logo to show up on desktops under the sticky menu.

I have given up for now :(

Will try again later.

Thanks.

- Pratik