Out of stock product alignment - by Shezad

This topic has 9 replies, 2 voices, and was last updated 4 years, 1 months ago ago by Shezad

  • Avatar: Shezad
    Shezad
    Participant
    January 21, 2021 at 23:55

    Hello,

    I need some assistance with formatting out of stock inventory so it is aligned with my in stock inventory. When view my products, anything that is out of stock (whatever is not set to available on backorder) the formatting of the image, text and price does not align with the in stock products.

    Please see the image for reference here=. https://snipboard.io/gFcZ47.jpg

    I have used some CSS that I found while searching the support forum however I cannot seem to figure this one out.

    Regards~

    Please, contact administrator
    for this information.
    8 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    January 22, 2021 at 12:59

    Hello,

    If you want to align the titles of all the products then that custom CSS is not suitable for you because it causes the issue. I removed that. Check now, please.

    Regards

    Avatar: Shezad
    Shezad
    Participant
    January 22, 2021 at 20:46

    Thank You, that worked perfectly. I did have 3 more questions.

    1) Would you please help me implement a scroll bar in my menu. I cannot seem to locate anything to do that. https://snipboard.io/JUetMI.jpg. I would also be okay with recreating my menu using static blocks if necessary but I am unsure how to implement a scroll bar on there either. This is the URL of what I made using a static block if a scroll bar can be implemented here or on the original menu, either would work for me. https://snipboard.io/Z93nr6.jpg

    2) I seem to be having issues with my menu scrolling along with the page when the menu is active and you scroll down. By the time I’ve finished scrolling to the end of my menu the content has moved along with that as well as seen here https://snipboard.io/Z7SHYh.jpg

    3) The menu seems to open briefly but while I am trying to select the submenu options it often deactivates (seems very sensitive to turning the menu off). I usually have to put my mouse over the menu 2-3 times before I am able to select a submenu option because it keeps deselecting. For an example of this it’s very hard to show that but if you hover over the menu and try to click on any of the submenu items it will close the menu very quickly before your mouse drags to the subitem.

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    January 25, 2021 at 19:54

    Hello,

    1) Set the height of the menu in the menu item settings https://prnt.sc/xm9qa2 and add the below code to Theme Options > Custom CSS

    .header-main-menu .nav-sublist-dropdown:not(.nav-sublist) {
        overflow-y: scroll;
    }

    2) It’s not the issue, you scroll the page, not the menu only.

    3) Provide us with short video of the issue using Gyazo gif tool for better understanding when it does now work.

    Regards

    Avatar: Shezad
    Shezad
    Participant
    January 26, 2021 at 01:54

    1) Thank you that code worked perfectly. How can I make the scroll bar thicker, it’s currently very thin. https://snipboard.io/rvnuyb.jpg

    2) I see, and this was also actually resolved by adding the scroll bar functionality.

    3) I have recorded the following video where I am attempting to select one of the sub menu items but you can see that the menu disappears as soon as I move my mouse. https://gyazo.com/a0e94f7532b46cd375aa433f7d6d9820

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    January 26, 2021 at 14:15

    Hello,

    1) You are welcome. Add the below code to change the width of the scroll bar

    body ::-webkit-scrollbar {
      width: 7px;
    }

    3) That’s very strange because don’t have the mentioned problem https://gyazo.com/a3a84c89150e9f2b170484975ada2163
    What browser do you use? Try another browser. Do you have the same issue?

    Regards

    Avatar: Shezad
    Shezad
    Participant
    January 26, 2021 at 22:50

    1) Thank You, that worked perfectly. Last thing I need in terms of scroll bar styling will be to change the color. The hex code of what I would like would be #b71c1c I have tried a few CSS codes however I cannot seem to get it to work.

    2) Is it possible to add multiple scroll bars on the menu? Something like this https://snipboard.io/cQzJXB.jpg

    3) I believe it was an issue with the browser, was using safari initially. it seems to work properly on chrome.

    4) I also was wondering if its possible to implement a flyout menu within a mega menu. As shown in this example. https://snipboard.io/9ROr61.jpg

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    January 27, 2021 at 16:33

    Hello,

    1) You are welcome. Add the below code

    body ::-webkit-scrollbar-thumb {
        background: #b71c1c;
    }

    2) We don’t have the option to set custom height for every column. So, nope. You may submit customization request here and ask if WPKraken team will be able to implement this for you by additional customization.

    3) Check now.

    4) We don’t have such option in our theme. Use third-party mega menu plugins to implement such view.

    Regards

    Avatar: Shezad
    Shezad
    Participant
    January 27, 2021 at 21:47

    Thank you for the help

  • Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Out of stock product alignment’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.