How to make the vertical menu collapsed

  • Hello,
    Please check on this page https://harvesthose.com/hose/pvc-discharge-hose/

    I am creating a vertical product menu on all of the products page so the vistor can easily shift browsing different products.

    Problem is this vertical menu expanded all the time as you can see from that page, we will put a lot of products pages in the site, the sidebar will be extreme long if the menu keeps expanded.

    We want the menu display a sign of ‘+’ after the parent page title so the visitor knows there’s child product pages under that specific page they clicked, and they are free to choose whether to display the child products pages by click ‘+’ or not. We do not want to expand all the pages which looks extremely stupid if there’s hundreds of products page created.

    The existing theme is customify, but i don’t think this is about theme’s problem because i have faced exactly same problem in OceanWP and Astra, this is about the wordpress widget itself.

    Please share the extra CSS code if there do have this kind of code, plugin is my last choice.

    BTW, i tried the CSS code below shared from another support, which’s not working properly because the child pages title disappeared totally.

    .main-navigation li.current-page-parent ul {
    display: none;
    }

    I would be very grateful if anyone can help me out.
    Thank you in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • the sidebar will be extreme long if the menu keeps expanded.

    The sidebar will be extremely long even if the menu is collapsed. All of that information would be in every page of your site. That is not a user friendly thing. You would do better to just list categories or use a Related Post widget so that you actually help the user instead of showing everything there is in one huge list.

    Thread Starter shinnmoon

    (@shinnmoon)

    Hello Joy,
    Thanks for your reply.

    I’m afraid you misunderstand my meaning, i will only put the vertical menu in products page, the other pages are full width content without any sidebar.

    The top menu wilL list main categories only and this vertical menu will help visitor to shift browsing different products page. I think this is more user friendly because they do not have to click on the top menu and find different child products.

    Pls check on this sample page, this is what i am looking for.
    https://www.sinohose.com/pu-polyurethane-layflat-hose-pipe/
    Thank you again for your time.

    No, I understood what you intend. You want to put a sidebar menu on product pages, containing all the other products and you admitted that there will be a LOT of them. Menus take a lot of processing to output, and you want to list all the products on every product page? It is overwhelming for the user, and it won’t be used.
    You need to have filters or related product widget or something else that helps the user navigate. Don’t just throw everything you have onto every product page. There is no good store that does that. Visit Amazon and see how they do things.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make the vertical menu collapsed’ is closed to new replies.