adding a shopping basket

[Shaso]

Afternoon guys,

I’m at a difficult point in this build, e-commerce is new to me and I’ll be asking for some help. Hope you don’t mind.

I’m still working on the ‘cards’ replacing images in a gallery and will respond with code soon.

I have one issue at the moment and that’s add this script (which is a shopping basket) to the navigation bar. The script is getting blocked when I poet, but it’s just a script snippet for the basket.

It goes in fine, but when viewed on mobile it cover the ‘hamburger menu’ is it possible to add this.

I am going to try a porto header that has a basket and replace it with this, but I’m working on adding content at the moment.

Thanks for the help, I really appreciate it.

---

[Support2]

Hello,

Probably there’s some issue with HTML position for the icon cart or something similar. Another possible is that our logo is too big for small screens.

If your logo is too wide, please try changing the logo size on mobile with this custom CSS code below:

(css/custom.css):

@media(max-width: 767px) {
    .header-logo,
    .header-logo  img {
        width: 100px !important;
        height: auto !important;
    }
}

* Change the values as per your needs.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Shaso]

Thanks for the reply.

I realised that in the supplied script the tag ‘data-type’ was floating, I changed it to inline and it now sits in the right place.

However I do have and issue inside the nav bar. In the screen shot you can see the ‘search icon’ is sitting too high. Now, I’m going to remove the search bar, because for now the site really doesn’t need it, however when I do the basket (which sits right at present) then move up, like the search bar.

It’s obviously some css or class, but I can’t find it.
Basket position

---

[Support2]

Hello,

First please remove all code inside of “header-nav-features” div and change to:

<div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2">
    <span id="sellfy-shopping-cart" class="position-relative d-inline-block top-5" data-id="xxxxxxxxx" ................................
</div>

* Note position-relative d-inline-block top-5 in the cart button. This will move the button 5px to bottom. Possible values starts from top-0 until top-15. So you need find the value that fit better for your case.
* If you want move the icon to top, instead of top-xx you should use bottom-xx.

We hope this helps!

If even so this is not resolved, please put your project in a online web server and the link for us, so we can inspect the code in real time and send the best solution for you.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

• This reply was modified 3 years, 2 months ago by Support2.

[Author]

Posts