Sub Menu

[wardsdesign]

I tried to create a new sub menu based on the nav-pills main menu. This is the blue menu that starts with “Show All”. I am trying to get the smaller menu items to align left like the nav-pills dropdown menu. But they stay horizontal instead of vertical. It should look like this:

Bakery
Baking Cups
Bake and Serve
Retail Packaging

I created the code in the custom.css file.

Can you give me some direction to make this work?

---

[Support]

Hello,

Unfortunately we don’t have an example with filters and items with dropdown menu, but you can make a similar one using Bootstrap base navs.

I can see that you’re using an old version with Bootstrap 3, so the code is like this:

<ul class="nav nav-pills">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>

https://getbootstrap.com/docs/3.4/components/#nav-dropdowns

---

[wardsdesign]

Thanks for getting back to me. The code you sent was not what I was looking for. I am trying to get the sub menu to line up vertically beneath the top line menu items. Here is an older version of the page the shows what I would like it to look like:

https://www.gosolut.com/new_product_buttons.html

All the menu items need to visible and contained in a drop down Right now I am only able to get the sub menu to be horizontal and not the vertical orientation that we are looking for.

The working page is:

https://www.gosolut.com/new_product_buttons2.html

Thanks again for your help.

---

[Support]

This reply has been marked as private.

[Author]

Posts