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, 4 months ago ago by Olga Barlow

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
Olga Barlow

Support staff

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
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

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

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

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

Mobile

Please help

#191509 Copied

Olga Barlow

Support staff

April 19, 2018 at 14:19

Hello,

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

Regards

#191540 Copied

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
Olga Barlow

Support staff

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
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

Kingstone

Participant

April 24, 2018 at 09:50

Bump.

Any update ?

#191820 Copied
Olga Barlow

Support staff

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
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
Olga Barlow

Support staff

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

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Corporate – WordPress WooCommerce Theme

lazy-placeholder

Eco Scooter Store – WordPress WooCommerce Theme

lazy-placeholder

Cosmetics Store – WooCommerce Theme

lazy-placeholder

Organic Store 01 – WordPress WooCommerce Theme

lazy-placeholder

Architecture – WordPress Theme

lazy-placeholder

Spa – WooCommerce Theme

lazy-placeholder

Luxury Jewelry Store – WordPress WooCommerce Theme

lazy-placeholder

Niche Market – Multivendor WP WooCommerce Theme

lazy-placeholder

Watches Store – WooCommerce Theme

lazy-placeholder

Finances – 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.