How to swap login and cart positiion and make it appear only in sticky header

[solidsn2004]

Hi,

I have set my login details and shopping cart to appear on top in the top navigation bar. I would like if possible to switch their position and have first the cart icon and last the login details. Is it also possible to add the word “Carrello” instead of showing the amount in the cart and add an icon next to login? (see attachment).

Right now the shopping cart is in both the top navigation bar and the navigation bar.

Is there a way to remove it from the navigation bar but make it appear when I scroll down the page? (sticky header).

Please let me know if you can help me out.
Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the css below to your custom css option.

.top-menu .menu li:first-child {
    float: right!important;
}

.shopping-bag-item .amount:before{
   content: " Carrelo ";
}

.sticky-wrapper .shopping-bag-item{
  display:none;
}

.is-sticky .shopping-bag-item {
    display: block!important;
}

Let us know the result.

-Rui

[solidsn2004]

Thanks Rui,

This code swapped the position of login and cart.

Is there any chance I can now:

1. add the ss-lock icon before the login
2. instead of displaying the total amount of money in the cart to show the word “Carrello”
3. make the cart from the navigation invisible and make it visible when you scroll down the page? (Sticky header)

Thanks for your time.

[Rui Guerreiro – SUPPORT]

Hi,

2 and 3 was already provided in the code above. Did you add everything?

Will check 1.

-Rui

[solidsn2004]

Hi Rui,

Yes I have added all the css code you provided.
Unfortunately, 2 and 3 are still not working…

[Rui Guerreiro – SUPPORT]

Try this one for 1)

.top-menu .menu li:first-child a:before{
font-family:"SSGizmo";
content:"🔒"
}

-Rui

[Rui Guerreiro – SUPPORT]

The 2 and 3 are ok now, just clear the cache.
1 is not working will check with our head developer and get back to you.

-Rui

[solidsn2004]

Hi Rui,

The code is trying to insert the icon but it doesn’t appear properly.
If you check it shows the icon code you inserted in the code.
I tried both the code and the .ss-cart in the css but still doesn’t appear. (note that in your code you put the semicolon inside the quotation marks and I have changed that)

The “Carrello” in the item appears now but it doesn’t replace the total amount. I think this is fine as I prefer to have both. I will double check with my client and let you know If I need the total amount to be replaced with the “Carrello”. So for now number 2 is resolved.

[solidsn2004]

Number 3 isn’t working for me! I have cleared my cache but the cart still appears in the navigation bar.
I have also tested it in 3 browsers.

[Rui Guerreiro – SUPPORT]

3 seems fine to me.
https://www.dropbox.com/s/6dawuvasihx4jki/Screenshot%202015-10-19%2013.27.01.png?dl=0

Try to use chrome in Incognito mode mac( cmd + Shif + N ) or windows ( Ctrl + Shif + N )

Will let you know when I have something on 1.

-Rui

[solidsn2004]

Yes I am using incognito mode all the time.
It’s working now! I don’t know why but it takes some time for the site to update. I was using incognito mode to test the changes even 10 minutes after the changes but it wasn’t showing!

Thanks for that. Will be waiting for number 1 🙂

[Rui Guerreiro – SUPPORT]

I also fixed 1 already.

This was the correct code.

.top-menu .menu li:first-child a:before{
font-family:"SSGizmo";
content:"\1F512";
}

-Rui

[solidsn2004]

Thanks a lot Rui.

The icon appears now but unfortunately another problem appears when you add the icon.
If you go to the cart, in the dropdown menu there is the lock icon inside and on top of the “Vai al negozio” button.

This doesn’t happen with the cart inside the navigation bar but only in the cart that is in the top navigation bar.

[Rui Guerreiro – SUPPORT]

Didn’t realize that. I already changed to this one and it works.

.top-menu .menu > li:first-child a:before{
font-family:"SSGizmo";
content:"\1F512";
}

-Rui

[solidsn2004]

Thanks a lot Rui!

Now it’s perfect! You can lock this as resolved.