3

I am working on a new layout for my ASP.Net site and am taking advantage of the twitter bootstrap but can not get the dropdown menu working 100%. I have a menu labled "Media" and when you click on the submenu pops down like it should but the width of the submenu does not expand it's width dynamicly to fit all the text in 1 line. You can see what I am talking about by going to http://ffinfo.azurewebsites.net/webform1.aspx. If you look at the Media drop out the final menu option should be on one line but since the menu is not dynamicly adjusting it's width the last menu item is forced to 3 lines. How can I make the submenu dynamicly adjust it's width so that it can fit that 3rd option all in one line? Here is the code I am using to generate that menu:

<div class="column-main">
            <div class="row-fluid">
                <div class="navbar main-nav">
                    <div class="navbar-inner">
                        <ul class="nav">
                            <li>
                                <a href="http://www.ffinfo.com/">
                                    <i class="icon-home"></i>
                                </a>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <asp:Literal ID="lblSiteTitle" Text="<%$Resources:Navigation, Site%>" runat="server" />
                                    <b class="caret"></b>
                                </a>

                                <ul class="dropdown-menu">
                                    <li>
                                        Temp
                                    </li>
                                </ul>
                            </li>

                            <li class="divider-vertical" />

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <asp:Literal ID="lblMediaTitle" Text="<%$Resources:Navigation, Media%>" runat="server" />
                                </a>
                                <b class="ceret"></b>

                                <ul class="dropdown-menu">
                                    <li class="nav-header text-center">
                                        <asp:Literal ID="lblFanTitle" Text="<%$Resources:Navigation, Fan%>" runat="server" />
                                    </li>

                                    <li class="nav-header text-center">
                                        <asp:Literal ID="lblMediaSubTitle" Text="<%$Resources:Navigation, MediaSub%>" runat="server" />
                                    </li>

                                    <li class="nav-header text-center">
                                        <asp:Literal ID="lblTest" Text="<%$Resources:Navigation, Chronicles%>" runat="server" />
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
  • the answer below may be of benefit in your particular case. Attempting to just add the anchor tag made the header a link for me (on hover event) and also made the header a different style (centered somehow, font, size, etc.). For my particular needs, I went into bootstrap.css and modified nav-header to include white-space: nowrap; and it acted as normal, just not going to next line. – Robert Sep 06 '13 at 14:46

1 Answers1

7

Add the link inside an anchor <a> tag and the dropdown-menu box will adjust its width. Like so: 

<li class="nav-header text-center">
    <a href="#">Final Fantasy Crystal Chronicles Series</a>
</li>

It's comes from this css in bootstrap.css:

.dropdown-menu > li > a {
...
    white-space: nowrap;
...
}
Simon C
  • 9,458
  • 3
  • 36
  • 55