0

i have this code:

<nav class="navbar navbar-inverse">
<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="glyphicon my-icon"></span>
    </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="#">value</a>
        </li>
        <li class="dropdown">
            <ul class="dropdown-menu row">
                <div class="col-xs-12">
                    <li>
                        <a href="#">value</a>
                    </li>
                    <li>
                        <a href="#">value</a>
                    </li>
                </div>
            </ul>
        </li>
    </ul>
</div>

As you can see, it's a pretty standard Bootstrap menu. I would like the submenus to fill the entire menu width but I haven't been successful.

I have this: enter image description here

I want this: enter image description here Thanks in advance!

csharp_ant
  • 75
  • 1
  • 10

1 Answers1

0

Here is your solution

/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }

And here is your Demo

M B Parvez
  • 808
  • 6
  • 16