Submenu layout

  • Resolved shoppizstore

    (@shoppizstore)


    9 years, 8 months ago

    Hello Friends,
    My website is https://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)

  • 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

    (@shoppizstore)

    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

    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

    (@shoppizstore)

    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

    (@shoppizstore)

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

    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

    (@shoppizstore)

    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.