Title: Submenu layout
Last modified: August 30, 2016

---

# Submenu layout

 *  Resolved [shoppizstore](https://wordpress.org/support/users/shoppizstore/)
 * (@shoppizstore)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/)
 * Hello Friends,
    My website is [http://www.shoppiz.in](http://www.shoppiz.in) 
   and I have installed zeriflite theme. I need help to fix the SubMenu lay out 
   for the Top Horizontal Menu. If we hower the mouse on the Retailer the Sub Categories
   get listed in List format in one line. I want it to look in Grid format. I change
   the .navbar-nav ul.sub-menu width to 800px, but this is only increasing the width
   of the box and not changing the listing format for the Sub Categories. Please
   help me to fix this.
 * regards,
    Riyaz

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

 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296761)
 * Add this to your custom CSS:
 *     ```
       .navbar-inverse .navbar-nav ul.sub-menu {
          width: 300px;
       }
   
       .navbar-inverse .navbar-nav ul.sub-menu li {
          width: 50%;
          float: left;
       }
       ```
   
 *  Thread Starter [shoppizstore](https://wordpress.org/support/users/shoppizstore/)
 * (@shoppizstore)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296762)
 * Thank you Sir.
 * Will this setup only be showing 2 rows of Sub Categories. Can I have say multiple
   rows depending on the number of Sub Categories I add.
 * Awaiting your reply.
 * Regards,
 * Riyaz
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296763)
 * The number of columns will depend up on the **width** property in the second 
   rule. A **width** of 50% means that two items can fit side by side (50% x 2 =
   100%). If you want three columns, then set the width to 33% (33% x 3 = 99%). 
   For four columns, set the width to 25% (25% x 4 = 100%).
 * If you increase the number of columns, you will also have to increase the size
   of the **width** in the first rule so all of the menu items will fit.
 *  Thread Starter [shoppizstore](https://wordpress.org/support/users/shoppizstore/)
 * (@shoppizstore)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296764)
 * Appreciate your quick reply Sir.
 * Thank you ever so much , i have grappling with this since few days. I honestly
   appreciate your help.
 * Just to confirm, so if I decide to keep 4 rows for my sub categories, I will 
   update css as this..
    .navbar-inverse .navbar-nav ul.sub-menu { width: 300px;}
 * .navbar-inverse .navbar-nav ul.sub-menu li {
    width: 20%; float: left; }
 *  Thread Starter [shoppizstore](https://wordpress.org/support/users/shoppizstore/)
 * (@shoppizstore)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296765)
 * Appreciate your quick reply Sir.
 * Thank you ever so much , i have grappling with this since few days. I honestly
   appreciate your help.
 * Just to confirm, so if I decide to keep 4 rows for my sub categories, I will 
   update css as this..
    .navbar-inverse .navbar-nav ul.sub-menu { width: 300px;}
 * .navbar-inverse .navbar-nav ul.sub-menu li {
    width: 25%; float: left; }
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296766)
 * Yes, but I would probably increase the width in the first rule to about 500px
   so the menu items are not crowded together:
 *     ```
       .navbar-inverse .navbar-nav ul.sub-menu {
          width: 500px;
       }
   
       .navbar-inverse .navbar-nav ul.sub-menu li {
          width: 25%;
          float: left;
       }
       ```
   
 *  Thread Starter [shoppizstore](https://wordpress.org/support/users/shoppizstore/)
 * (@shoppizstore)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296767)
 * Thank you ever so much Sir.
 * This will surely be making my life easy.

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

The topic ‘Submenu layout’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [submenu](https://wordpress.org/support/topic-tag/submenu/)
 * [submenu width](https://wordpress.org/support/topic-tag/submenu-width/)
 * [topmenu](https://wordpress.org/support/topic-tag/topmenu/)

 * 7 replies
 * 2 participants
 * Last reply from: [shoppizstore](https://wordpress.org/support/users/shoppizstore/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/submenu-layout/#post-6296767)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics