# Split Sub-Menu

**URL:** <https://colorlibsupport.com/t/split-sub-menu/10210>\
**Category:** Dazzling\
**Created:** [May 12, 2016, 9:57am UTC](https://colorlibsupport.com/t/split-sub-menu/10210 "2016-05-12T09:57:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [May 12, 2016, 9:57am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/1 "2016-05-12T09:57:47Z")

</div>

Can i make submenu in column ( Split ). If yes Help.

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [May 12, 2016, 1:40pm UTC](https://colorlibsupport.com/t/split-sub-menu/10210/2 "2016-05-12T13:40:50Z")

</div>

Hi @altros,

Thank you for your question.

You can try creating it by developing custom CSS code as described on the below pages.

> **[How to split Wordpress submenu in 2 column - PHPCluster](https://www.phpcluster.com/how-to-split-wordpress-submenu-in-2-column/)**
>
> How to split Wordpress submenu in 2 column - PHPCluster,Hello reader, if you are interested to use dropdown with multi column in wordpress for submenu then you can do it using CSS.

> **[WordPress sub-menu items split in 2 columns. The easy way. - Web design...](https://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/)**
>
> Let’s say you have a long list of items in one of your WordPress sub-menu drop downs. It is often the case with Products or Services sections of the site. So, you probably want those sub-menu items to be split in 2 columns. But you want 2...

[http://www.wphub.com/ubermenu-wordpress-mega-menu-plugin/](http://www.wphub.com/ubermenu-wordpress-mega-menu-plugin/)

Best Regards,  
Movin

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [May 13, 2016, 7:07am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/3 "2016-05-13T07:07:53Z")

</div>

Thankyou

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [May 13, 2016, 7:25am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/4 "2016-05-13T07:25:02Z")

</div>

You are most welcome here 🙂

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [May 13, 2016, 11:25am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/5 "2016-05-13T11:25:47Z")

</div>

but my sub-menu not aligned… reason?

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [May 16, 2016, 7:44am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/6 "2016-05-16T07:44:11Z")

</div>

Do you want to left align all of them?

If yes then could you please share me your site URL where it’s displaying so that i can troubleshoot it?

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [May 16, 2016, 8:45am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/7 "2016-05-16T08:45:09Z")

</div>

[http://www.legalvyapar.com/](http://www.legalvyapar.com/)

look at business registration section…

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [May 17, 2016, 10:00am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/8 "2016-05-17T10:00:13Z")

</div>

You can align that menu by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -\> Appearance -\> Customize -\> Dazzling Options -\> Other -\> Custom CSS

```auto
#menu-item-15 ul.dropdown-menu {
    min-width: 470px;
}
#menu-item-15.sub-menu-columns ul.dropdown-menu li{
  text-align: left;
}
#menu-item-15.sub-menu-columns ul.dropdown-menu li:nth-child(odd) {
    margin-right: 5px;
    float: left;
    width: 50%;
}
#menu-item-15.sub-menu-columns ul.dropdown-menu li:nth-child(even) {
    width: 45%;
    float: left;
}

```

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [May 17, 2016, 11:16am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/9 "2016-05-17T11:16:48Z")

</div>

**Thank you** 🙂

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [May 18, 2016, 6:56am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/10 "2016-05-18T06:56:31Z")

</div>

You are most welcome here 🙂

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [June 2, 2016, 1:07pm UTC](https://colorlibsupport.com/t/split-sub-menu/10210/11 "2016-06-02T13:07:04Z")

</div>

Hi @movin

Is there any numbring for menu Item in dazzling theme…

like **menu-item-15** in your previous reply.

If yes then how can i get these menu item number???

Thanks

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [June 2, 2016, 1:09pm UTC](https://colorlibsupport.com/t/split-sub-menu/10210/12 "2016-06-02T13:09:01Z")

</div>

One more Qn

Can we make sub sub menu item?

if yes, then Plz Help.

thenks

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [June 3, 2016, 11:44am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/13 "2016-06-03T11:44:38Z")

</div>

> Is there any numbring for menu Item in dazzling theme…
> 
> like menu-item-15 in your previous reply.
> 
> If yes then how can i get these menu item number???

These numbers are generated by WordPress and i get it by inspecting source code of your site.

> Can we make sub sub menu item?

This theme is built on Bootstrap and by default it doesn’t support third level of menu structure and one submenu is max so to achieve this you have to develop custom code by referring the solution posted in the following reply.

[https://colorlibsupport.com/t/child-theme-menu-override-in-functions-php-adding-a-third-level-of-menu-depth/](https://colorlibsupport.com/t/child-theme-menu-override-in-functions-php-adding-a-third-level-of-menu-depth/)

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [June 6, 2016, 5:47am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/14 "2016-06-06T05:47:11Z")

</div>

Thanks @movin

but when i click on main menu item all sub-menu item disappear. whats the problem sir?

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [June 6, 2016, 5:50am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/15 "2016-06-06T05:50:07Z")

</div>

when click again all sub menu item appears again…

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [June 6, 2016, 7:39am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/16 "2016-06-06T07:39:02Z")

</div>

It seems happening on your site due to CSS conflict. To resolve the issue try using the below CSS code in your site as described above.

```auto
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
}

```

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [June 6, 2016, 8:20am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/17 "2016-06-06T08:20:30Z")

</div>

Thank @movin

but still problem not solved sir!

---

<div class="post-metadata">

**Author:** ![altros](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/b77776/32.png) [@altros](https://colorlibsupport.com/u/altros)\
**Post date:** [June 6, 2016, 8:24am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/18 "2016-06-06T08:24:29Z")

</div>

Yup Solved! Thanks @movin

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [June 6, 2016, 8:24am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/19 "2016-06-06T08:24:36Z")

</div>

I visited your site and it’s working fine for me now as shown in the attached screenshot.

Could you please try clearing your browser cache or using different browser?

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [June 6, 2016, 8:24am UTC](https://colorlibsupport.com/t/split-sub-menu/10210/20 "2016-06-06T08:24:59Z")

</div>

You are most welcome here 🙂