Cart Button on Mobile

When the website is in mobile mode, how do I move so that the shopping cart icon is always displayed next to the search icon. (I'm not using the register, login or wish list icons so there is no reason to have the cart in "+" by itself).

Also is there a way to move up the menu bar so that it is at the top of the page from the very beginning (in mobile). I makes for a bit cleaner usability I think. This is what I'm trying to accomplish.


Thanks!
Carl

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.

Thanks for the quick feedback! That looks great and works, but is there anyway to add so that the customer can also see how many items are in their cart.


For the menu bar, this is what we want to accomplish. https://goo.gl/photos/KpsKrFRJfTxEnsrLA as you can see, the instead of having the bar with the menu, cart and search below the logo, we want to have it sitting at the top of the page from the beginning. I was playing around with the CSS for it and not having any luck.


Thanks!

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.

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.

Ahh... that locks the menu at the top when in desktop mode, I need it in mobile mode. BUT! That still gave me the css I needed to get it to work. I added the following to the mobile-only.css and it now works/looks the way I want it to.

.responsive-nav-wrapper-parent {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1001;
}
.master-wrapper-page {
    margin: 61px 0; 
}

For the cart, I may just keep it the way it was, but just change the icon to the cart icon. That way the customer can quickly see how many things they have in the cart by clicking on it.

Thanks!