Return to previous page

How to make Multilevel Accordion Menu in Headers

This topic has 12 replies, 2 voices, and was last updated 6 years, 10 months ago ago by Olga Barlow

  • Avatar: Kingstone
    Kingstone
    Participant
    April 18, 2018 at 05:06

    HI,

    I’ve purchased this template and applied to my website (http://beta.bukabeli.co.id)
    Currently I’m having problem to make multilevel accordion menu in headers.
    The purpose of this is i want to make the product categories displayed in multilevel accordion menu for Product menu in headers but i’m having difficulties to make that.

    Please help me to make that

    Regards

    Shandy

    #191395 Copied Theme version: Mango
    11 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 18, 2018 at 10:58

    Hello,

    Do you want to create accordion or simple drop-down with multi-levels?
    If you want simple drop-down with multi-levels then you need to create subitems for the subitems
    http://prntscr.com/j6tbz4 to get http://prntscr.com/j6tccj
    and add the following CSS

    nav .simple-list .submenu .submenu {
    left:  100%;
    margin-left:  0;
    top: 0;
}

    If you want to create accordion to open it by click you need other CSS styles + also JS customization because there is no such feature in this template. Contact WPKraken team to get help with additional customization.

    Regards

    #191427 Copied
    Avatar: Kingstone
    Kingstone
    Participant
    April 19, 2018 at 09:51

    What i want is simple-drop down menu multilevel with accordion.
    So whenever i click the parent category, the child category is shown.

    Right now if i following your suggestion, all of submenus are shown from the start and in mobile view, the submenu is not shown

    #191508 Copied
    Avatar: Kingstone
    Kingstone
    Participant
    April 19, 2018 at 09:56

    And another things for your preference,
    What i want is, this kind of accordion if you access it using mobile.
    So whenever you click the ‘+” button, the child categories are shown
    Capture

    And i want to show the parent categories like this but the child categories are not shown from the start.
    SS

    I’ve also tried to used accordeon from existing feature.
    If i viewed it using desktop, the accordeon working properly, but in mobile view the accordeon is not wokring

    Desktop
    Desktop

    Mobile
    Mobile

    Please help

    #191509 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 19, 2018 at 14:19

    Hello,

    Can you, please, provide temporary FTP access to your site to check the problem?

    Regards

    #191540 Copied
    Avatar: Kingstone
    Kingstone
    Participant
    April 20, 2018 at 04:45

    I’ve already found the problem about that.
    So another thing regarding the view of accordion menu,

    1. As you can see from above picture, between each one of accordion menu, there are some blank spacing.
    So how can i erase that spacing.
    2. Accordion Arrow position is aligned to the right, How can i move it so it will have same position with it’s parent category’s sign (“+”)

    Thank you

    #191563 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 20, 2018 at 09:33

    Hello,

    Use the following code

    @media (max-width: 1199px){
.navigation .submenu .toggle-list-container, .submenu .accordeon{
    padding-left: 0 !important;
}
.navigation .submenu .accordeon-title:after {
    right: 20px;
}
.navigation .submenu .accordeon-title{
    padding: 0;
}
}

    Regards

    #191584 Copied
    Avatar: Kingstone
    Kingstone
    Participant
    April 23, 2018 at 09:45

    Before i applied based on your answer from my other thread, it was working well, but after i applied that, now the problem still occurs just like before

    Another thing in desktop view,


    1. How to move the accordion button to the right a little bit ?
    2. How to make the line spacing just like item beside “Networking”

    Thank you

    #191710 Copied
    Avatar: Kingstone
    Kingstone
    Participant
    April 24, 2018 at 09:50

    Bump.

    Any update ?

    #191820 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 25, 2018 at 10:22

    Hello,

    1) Add inside that media query also this code

    .navigation .submenu .accordeon {
    margin-bottom: 0;
}

    2) Provide me mockup how it should be. Because I’m not sure if understand how should look the final result.

    Regards

    #191928 Copied
    Avatar: Kingstone
    Kingstone
    Participant
    April 30, 2018 at 06:11

    1) Alright, it works.
    Well i want to apply this in another page (http://beta.bukabeli.co.id/catalog_product.html)
    How can i apply this ?

    2) I think this picture should describe it

    #192116 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 30, 2018 at 10:19

    Hello,

    1) If you use Chrome use inspector tools (other browsers also have similar tool) https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 inspect elements that you want to change https://gyazo.com/32a313bb6dbb8887b9c2d0f04a2958c6 and just edit CSS styles according to your needs. For example
    .information-blocks .accordeon {margin-bottom: 0;}
    2) a) to move the arrow

    @media (min-width: 1200px){
.navigation .submenu .accordeon-title:after {
    right: 10px;
}
}

    b) both items have the same line-height http://prntscr.com/jbvuo9 and http://prntscr.com/jbvuyu So, don’t understand what exactly you want to change.

    Regards

    #192143 Copied
  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Online Courses – WordPress WooCommerce Theme
lazy-placeholder
Shoes Store – WooCommerce Theme
lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Flowers Store – WooCommerce Theme
lazy-placeholder
Plumbing Store – WordPress WooCommerce Theme
lazy-placeholder
Home Decor 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Grocery Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Lifestyle Blog – WordPress WooCommerce Theme
lazy-placeholder
Engineer Store – WordPress WooCommerce Theme

See All Templates

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