Profile: Peter.Zhekov

Please make sure that you are using the proper version of IE browser, but not with 'Quirks mode' or something else turned on (turn off all the emulation if there are some). And also please send us a link to screenshot of the problem.

Styles for the navigation bar (probably you mean 'mega menu') you can find here: '~Plugins\SevenSpikes.Nop.Plugins.MegaMenu\Themes\your theme here\Content\MegaMenu.css'.

You can simply hide the product image, find the following code in your 'styles.css' file:

.product-grid .product-item .picture {
   ...
}
And add 'display: none;' property like this:

.product-grid .product-item .picture {
   ...
   display: none;
}

Please check you 'OrderSummary.cshtml' view (you can find it here '~Presentation\Nop.Web\Themes\Motion\Views\ShoppingCart\OrderSummary.cshtml') for following code:

<div id="terms-of-service-warning-box" title="@T("Checkout.TermsOfService")" style="display:none;">
                                <p>@T("Checkout.TermsOfService.PleaseAccept")</p>
                            </div>
                            <div class="terms-of-service">
                                <input id="termsofservice" type="checkbox" name="termsofservice" />
                                <label for="termsofservice">@T("Checkout.TermsOfService.IAccept")</label>
                                <span class="read" onclick="javascript:OpenWindow('@Url.RouteUrl("TopicPopup", new { SystemName = "conditionsofUse" })', 450, 500, true)">@T("Checkout.TermsOfService.Read")</span>
                            </div>

If this code looks the same in your document, everything is fine. If there are some difference please write back what your view contain.  Also there are settings in the Administration which you can check:

'Content Management/Topics'. Once you have opened it look for 'ConditionsOfUse'. Inside it check the system name and the URL.

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.