Profile: Peter.Zhekov

Hi Richard,
Your manufacturers images in the carousel can be vertically centered but I need to take a look at them first. Can you provide me some URL to live site, so I can test it?
For the second question, this tiny box must be the border. You can remove it if you add the following styles in the CSS file (which you can find here: '~Plugins/SevenSpikes.Nop.Plugins.JCarousel/Themes/motion/Content/JCarousel.css')

When you find the css file, please add this code below:

.manufacturers-carousel .item-picture a {
    border: none;
}

About the issue with the shopping cart icon, I am not able to give you a fast and easier answer about how to accomplish this. The problem comes from both views where the elements are placed. So when you replace one element from one view to another, whole site broke down.
So this is quite big customization and it`s not that simple to be done.

Hi there,

For mega menu position you try this (add the code below in the '980.css' file):

div#headerMenuParent {

    position: fixed;
    top: 0;
    width: 100%;
}
.master-wrapper-page {
    margin: 61px 0;
   
}

This must be enough if you have just one line of links in the mega menu. The troubles comes if there are more than one lines in the menu. In this case you must change the values of the margin on the 'master wrapper page' element. Also there is another problem .. if you are logged in or out, there is another one element appearing in the markup (admin-header-links). Please try to accomplish this like that, and if you have some trouble, please write back and I will see what I can do.

First thing to do is to hide the 'header-links-wrapper' in mobile. You must add the following styles in '~nopCommerce_3.6\Presentation\Nop.Web\Themes\Nitro\Content\css\mobile-only.css' file.

.header-links-wrapper.open {
  display: none;
}

Next thing is to change the '_Root.cshtml' view ('~Presentation\Nop.Web\Themes\Nitro\Views\Shared\_Root.cshtml'). Here you need to change the content of the following element:

<div class="personal-button" id="header-links-opener">
                <span>@T("SevenSpikes.Themes.Common.Personal")</span>
            </div>

This code must be replaced with the one that takes you to the 'Shopping cart page' (look below for the new code).

<div class="personal-button" id="header-links-opener">
                <a href="@Url.RouteUrl("ShoppingCart")" class="ico-cart"></a>
                @Html.Action("FlyoutShoppingCart", "ShoppingCart")
            </div>

After this change when you press the 'header-links-opener' button it takes you to the 'Shopping cart page' which the purpose  is. Finally this button icon must be changed, so this is what you need to do:

First find this styles in the 'mobile-only.css' file:

.responsive-nav-wrapper .personal-button {
    background-image: url("../img/mobile-btn-links.png");
    display: inline-block;}

Here we need just to change the background image with the

one for 'shopping cart'.
The lines bellow is how new background image should be looks like:

.responsive-nav-wrapper .personal-button {
    background-image: url("../img/icon-cart.png");
    display: inline-block;}

And now just add this line: "vertical-align: top;" in the brackets of this code '.responsive-nav-wrapper > div'. This is to set all the buttons in one line.
Last step it to show all the icons we hide on first place in desktop resolution:

.header-links-wrapper {
    display: block;
    float: right;
    margin: 0;
}

Here you must add only the bold line in case the icons are hidden in desktop resolution. This must happen in '980.css' file.
I believe this is what you want to do with the shopping cart button in mobile.

For the second question(for the menu in the mobile) I'm not sure what you want to achieve, so please give me accurate information and I will help you once I understand the issue.

Hi there,

You can use the 'Custom Head Styles' in the 'Nitro' theme administrations. Please add the following styles:

@media print {.header-menu {display: none;}}

If you need  to do more changes you must include the other styles in the brackets after '@media print'. Actually we have 'print.css' file which serves for 'Order details page' (there is the only place with such a functionality in 'Nopcommerce'), so you can take a look for hints, see what elements are shown and how.

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.

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

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.  

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).

Hi there,

If your images for the slider are smaller you can set style property for max-with (look the example below) and this way to limit the stretching of the slider just as much as you want.

.slider-wrapper {
    margin: 0 auto;
    max-width: 1600px;
    position: relative;
    z-index: 1;
}

The bold styles are the one you must change. For 'max-widht' use whatever value you want, and 'margin: 0 auto;' will hold your slider in the center of the screen. Where you must place this styles? In the file '~Plugins/SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/your theme name here/Content/nivo/nivo.css'. Just look for this selector - '.slider-wrapper'-  and add the styles and values you want.